Vertical Scroll Slider

February 12, 2025 · AI Conversations

User

create vertical slider for scroll event in which left side has imagae and right side has content and on every single scroll section will change an section will always show in middle of the container

Assistant

Here's a React component for a vertical slider that changes sections on scroll. It keeps the active section centered in the viewport. This implementation uses **Framer Motion** for smooth animations and **Intersection Observer** to track the currently visible section.

This slider consists of:
✅ A **left side** with images
✅ A **right side** with corresponding text content
✅ A **scroll-based transition** where each section is centered

### Steps:
1. Install dependencies:

yarn add framer-motion

2. Use the provided component in your project.

—

Now, here's the React component:

“`tsx
import { useEffect, useState }

User

not react component just jaquery html

Assistant

Here's a jQuery-based vertical scroll slider where:

✅ The **left side** contains images.
✅ The **right side** contains text content.
✅ On each scroll event, the next section smoothly moves to the center.

### Steps:
1. Add **jQuery** to your project (if not already included).
2. Copy and paste the **HTML, CSS, and jQuery** code below.

—

### **HTML Structure**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Scroll Slider</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="slider-container">
    <div class="slider-wrapper">
        <div class="slide active">
            <div class="left"><img src="https://via.placeholder.com/400" alt="Image 1"></div>
            <div class="right"><h2>Section 1</h2><p>Content for section 1.</p></div>
        </div>
        <div class="slide">
            <div class="left"><img src="https://via.placeholder.com/400" alt="Image 2"></div>
            <div class="right"><h2>Section 2</h2><p>Content for section 2.</p></div>
        </div>
        <div class="slide">
            <div class="left"><img src="https://via.placeholder.com/400" alt="Image 3"></div>
            <div class="right"><h2>Section 3</h2><p>Content for section 3.</p></div>
        </div>
    </div>
</div>

<script src="script.js"></script>
</body>
</html>

—

### **CSS (styles.css)**

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.slider-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.8s ease-in-out;
}

.slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    opacity: 0.5;
    transition: opacity 0.5s;
}

.slide.active {
    opacity: 1;
}

.left {
    flex: 1;
    text-align: center;
}

.left img {
    max-width: 80%;
    border-radius: 10px;
}

.right {
    flex: 1;
    text-align: left;
    padding: 20px;
}

—

### **jQuery (script.js)**

$(document).ready(function () {
    let currentIndex = 0;
    const slides = $(".slide");
    const totalSlides = slides.length;
    let isScrolling = false;

    function scrollToSection(index) {
        if (index >= 0 && index < totalSlides) {
            isScrolling = true;
            let offset = index * -100;
            $(".slider-wrapper").css("transform", `translate(-50%, ${offset}vh)`);
            slides.removeClass("active");
            slides.eq(index).addClass("active");
            setTimeout(() => isScrolling = false, 800);
        }
    }

    $(window).on("wheel", function (event) {
        if (isScrolling) return;
        if (event.originalEvent.deltaY > 0) {
            currentIndex++;
        } else {
            currentIndex--;
        }
        if (currentIndex < 0) currentIndex = 0;
        if (currentIndex >= totalSlides) currentIndex = totalSlides - 1;
        scrollToSection(currentIndex);
    });
});

—

### **How It Works**
– When you scroll **down**, it moves to the next section.
– When you scroll **up**, it moves to the previous section.
– The **active section** always stays centered.

Would you like any modifications? 🚀

Vertical Scroll Slider

Leave a Comment Cancel