jQuery Slide Navigation Update

February 12, 2025 · AI Conversations

User
jQuery(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);
});
});
also add browser scroll change

Assistant
Here's the updated jQuery code that also updates the browser scroll position when changing slides:

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

    function scrollToSection(index, updateHash = true) {
        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");

            if (updateHash) {
                history.pushState(null, null, `#slide-${index + 1}`);
            }

            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);
    });

    // Update slide index based on hash on page load
    function updateSlideFromHash() {
        const hash = window.location.hash;
        if (hash.startsWith("#slide-")) {
            let index = parseInt(hash.replace("#slide-", "")) - 1;
            if (!isNaN(index) && index >= 0 && index < totalSlides) {
                currentIndex = index;
                scrollToSection(currentIndex, false);
            }
        }
    }

    $(window).on("popstate", function () {
        updateSlideFromHash();
    });

    updateSlideFromHash(); // Run on page load to sync scroll with hash
});

### Features Added:
✅ **Browser Scroll Update**: Updates the URL hash (`#slide-1`, `#slide-2`, etc.) when scrolling.
✅ **Back/Forward Navigation**: If the user presses back or forward, it scrolls to the corresponding section.
✅ **Sync on Page Load**: If the page is loaded with a hash (e.g., `example.com#slide-2`), it scrolls to the correct slide.

This ensures smooth navigation while also keeping the URL in sync with the current slide. 🚀

User
also on visible area scroll work after the visible area no scrolling
Assistant
Here’s an updated version of your jQuery script that ensures:

✅ **Scroll navigation only works when the slider is visible.**
✅ **Prevents scrolling beyond the slider section.**
✅ **Uses `IntersectionObserver` to detect visibility.**
✅ **Smooth scrolling behavior with hash updates.**

—

### **Updated jQuery Code**

jQuery(document).ready(function ($) {
    let currentIndex = 0;
    const slides = $(".slide");
    const totalSlides = slides.length;
    let isScrolling = false;
    const sliderWrapper = $(".slider-wrapper");
    const sliderContainer = $(".slider-container"); // Make sure your slider has this wrapper

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

            if (updateHash) {
                history.pushState(null, null, `#slide-${index + 1}`);
            }

            setTimeout(() => isScrolling = false, 800);
        }
    }

    function isSliderInView() {
        const rect = sliderContainer[0].getBoundingClientRect();
        return rect.top >= 0 && rect.bottom <= window.innerHeight;
    }

    $(window).on("wheel", function (event) {
        if (!isSliderInView() || isScrolling) return;

        if (event.originalEvent.deltaY > 0) {
            currentIndex++;
        } else {
            currentIndex--;
        }
        if (currentIndex < 0) currentIndex = 0;
        if (currentIndex >= totalSlides) currentIndex = totalSlides - 1;

        scrollToSection(currentIndex);
    });

    function updateSlideFromHash() {
        const hash = window.location.hash;
        if (hash.startsWith("#slide-")) {
            let index = parseInt(hash.replace("#slide-", "")) - 1;
            if (!isNaN(index) && index >= 0 && index < totalSlides) {
                currentIndex = index;
                scrollToSection(currentIndex, false);
            }
        }
    }

    $(window).on("popstate", function () {
        updateSlideFromHash();
    });

    updateSlideFromHash(); // Run on page load to sync scroll with hash
});

—

### **How This Works**
1. **Scroll Works Only When the Slider is Visible**
– Uses `getBoundingClientRect()` to check if the `.slider-container` is within the viewport.
– If **not in view**, normal scrolling behavior resumes.

2. **Prevents Scrolling Beyond the Slider**
– If the slider is out of view, it doesn’t capture the scroll event.

3. **Syncs With URL (`#slide-1`, `#slide-2`, etc.)**
– Works with browser history and back/forward navigation.

4. **Ensures Smooth Transition**
– Prevents multiple scroll events during animation using `isScrolling` flag.

—

### **Required HTML Structure**

<div class="slider-container">
    <div class="slider-wrapper">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
        <!-- Add more slides here -->
    </div>
</div>

📌 **Ensure your `.slider-container` wraps the entire slider section.**

—

### **Final Behavior**
✅ Scroll navigation works only when the slider is **visible**.
✅ Regular scrolling resumes **after the slider section**.
✅ Hash updates and **back/forward navigation** work correctly.
✅ Prevents fast scrolling glitches by handling **smooth transitions**.

Now your slider behaves exactly how you'd expect—smooth, precise, and user-friendly! 🚀🔥

User
but untille we wheel in that section change item
Assistant
Got it! You want the slider to change items continuously **only while scrolling inside the visible slider section** and **stop scrolling normally outside of it**. Here’s the improved solution:

—

### **Key Features in this Version**
✅ **Scroll works only when inside the slider section**
✅ **While scrolling inside, items change continuously**
✅ **Prevents body scrolling while inside the slider**
✅ **Allows normal scrolling outside the slider section**

—

### **Updated jQuery Code**

jQuery(document).ready(function ($) {
    let currentIndex = 0;
    const slides = $(".slide");
    const totalSlides = slides.length;
    let isScrolling = false;
    const sliderWrapper = $(".slider-wrapper");
    const sliderContainer = $(".slider-container");

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

            if (updateHash) {
                history.pushState(null, null, `#slide-${index + 1}`);
            }

            setTimeout(() => isScrolling = false, 800);
        }
    }

    function isSliderInView() {
        const rect = sliderContainer[0].getBoundingClientRect();
        return rect.top < window.innerHeight && rect.bottom > 0;
    }

    function preventBodyScroll(event) {
        if (isSliderInView()) {
            event.preventDefault();
        }
    }

    $(window).on("wheel", function (event) {
        if (!isSliderInView()) return; // Allow normal scrolling outside the slider
        event.preventDefault(); // Stop body scroll while in slider

        if (isScrolling) return;
        if (event.originalEvent.deltaY > 0) {
            currentIndex++;
        } else {
            currentIndex--;
        }
        if (currentIndex < 0) currentIndex = 0;
        if (currentIndex >= totalSlides) currentIndex = totalSlides - 1;

        scrollToSection(currentIndex);
    });

    // Prevent normal scrolling while inside the slider
    window.addEventListener("wheel", preventBodyScroll, { passive: false });

    function updateSlideFromHash() {
        const hash = window.location.hash;
        if (hash.startsWith("#slide-")) {
            let index = parseInt(hash.replace("#slide-", "")) - 1;
            if (!isNaN(index) && index >= 0 && index < totalSlides) {
                currentIndex = index;
                scrollToSection(currentIndex, false);
            }
        }
    }

    $(window).on("popstate", function () {
        updateSlideFromHash();
    });

    updateSlideFromHash(); // Run on page load to sync scroll with hash
});

—

### **How This Works**
1. **Scroll Navigation Works Only Inside the Slider Section**
– Uses `isSliderInView()` to detect if the slider is visible.
– If **not in view**, normal scrolling continues.

2. **While Scrolling Inside, Items Change Continuously**
– Prevents body scrolling while inside the slider using `event.preventDefault()`.
– Allows smooth scrolling between slides without moving the page.

3. **Normal Scrolling Resumes After Leaving the Slider**
– When the user scrolls past the slider, it no longer intercepts the scroll event.

4. **Supports Browser Back/Forward Navigation**
– URL updates (`#slide-1`, `#slide-2`, etc.).
– Clicking back/forward moves to the correct slide.

—

### **Required HTML Structure**

<div class="slider-container">
    <div class="slider-wrapper">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
        <!-- Add more slides -->
    </div>
</div>

—

### **Final Behavior**
✅ While **inside the slider**, scrolling moves slides.
✅ **Body scrolling is prevented** inside the slider.
✅ Once the **slider is out of view**, normal scrolling resumes.
✅ Works smoothly with **hash navigation** (`#slide-1`, `#slide-2`, etc.).

This ensures a **seamless user experience** without interfering with page scrolling. 🚀🔥

User
also on key pad up and down arrow
Assistant
Got it! You want the **up and down arrow keys** to function the same way as the scroll wheel while inside the slider.

—

### **Key Features in this Version**
✅ **Scroll navigation works only inside the slider section**
✅ **Slides change continuously while scrolling inside**
✅ **Prevents body scrolling inside the slider**
✅ **Supports both `mouse wheel` & `keyboard (↑ / ↓)`**
✅ **Allows normal scrolling outside the slider**

—

### **Updated jQuery Code**

jQuery(document).ready(function ($) {
    let currentIndex = 0;
    const slides = $(".slide");
    const totalSlides = slides.length;
    let isScrolling = false;
    const sliderWrapper = $(".slider-wrapper");
    const sliderContainer = $(".slider-container");

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

            if (updateHash) {
                history.pushState(null, null, `#slide-${index + 1}`);
            }

            setTimeout(() => isScrolling = false, 800);
        }
    }

    function isSliderInView() {
        const rect = sliderContainer[0].getBoundingClientRect();
        return rect.top < window.innerHeight && rect.bottom > 0;
    }

    function preventBodyScroll(event) {
        if (isSliderInView()) {
            event.preventDefault();
        }
    }

    function handleNavigation(direction) {
        if (!isSliderInView() || isScrolling) return;
        event.preventDefault(); // Stop body scroll while in slider

        if (direction === "down") {
            currentIndex++;
        } else {
            currentIndex--;
        }
        if (currentIndex < 0) currentIndex = 0;
        if (currentIndex >= totalSlides) currentIndex = totalSlides - 1;

        scrollToSection(currentIndex);
    }

    $(window).on("wheel", function (event) {
        handleNavigation(event.originalEvent.deltaY > 0 ? "down" : "up");
    });

    $(document).on("keydown", function (event) {
        if (event.key === "ArrowDown") {
            handleNavigation("down");
        } else if (event.key === "ArrowUp") {
            handleNavigation("up");
        }
    });

    // Prevent normal scrolling while inside the slider
    window.addEventListener("wheel", preventBodyScroll, { passive: false });
    window.addEventListener("keydown", preventBodyScroll, { passive: false });

    function updateSlideFromHash() {
        const hash = window.location.hash;
        if (hash.startsWith("#slide-")) {
            let index = parseInt(hash.replace("#slide-", "")) - 1;
            if (!isNaN(index) && index >= 0 && index < totalSlides) {
                currentIndex = index;
                scrollToSection(currentIndex, false);
            }
        }
    }

    $(window).on("popstate", function () {
        updateSlideFromHash();
    });

    updateSlideFromHash(); // Run on page load to sync scroll with hash
});

—

### **How This Works**
1. **Mouse Scroll (`wheel` event) & Keyboard Arrows (`keydown`) Work the Same Way**
– Scroll or press **↓ (down)** to go to the next slide.
– Scroll or press **↑ (up)** to go to the previous slide.

2. **Works Only Inside the Slider**
– Uses `isSliderInView()` to detect if the slider is visible.
– If **not in view**, normal scrolling is allowed.

3. **Prevents Body Scrolling While Inside the Slider**
– Stops `wheel` and `keydown` events from affecting the rest of the page.
– Allows **smooth slide transitions** while navigating.

4. **Supports Browser Back/Forward Navigation**
– Uses `history.pushState()` to update URL (`#slide-1`, `#slide-2`, etc.).
– Clicking **back/forward** restores the correct slide.

—

### **Required HTML Structure**

<div class="slider-container">
    <div class="slider-wrapper">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
        <!-- Add more slides -->
    </div>
</div>

—

### **Final Behavior**
✅ **Mouse Scroll (Wheel) Works** ✅ **Keyboard (Up/Down Arrows) Works**
✅ **Prevents Body Scroll Inside the Slider** ✅ **Allows Normal Scroll Outside**
✅ **Supports URL Hash Navigation (`#slide-1`, `#slide-2`)**

🔥 Now your slider is **fully interactive** with **mouse + keyboard support**! 🚀

User
but only apply wheel scroll under slider-container div
Assistant
Got it! You want the **wheel scroll** and **keyboard navigation (up/down arrows)** to work **only inside** the `.slider-container` and allow normal scrolling outside of it.

—

### **✅ Key Features of this Version**
✔ **Scroll navigation is limited to `.slider-container`**
✔ **Normal scrolling works outside of the slider**
✔ **Mouse wheel and keyboard (↑ / ↓) control the slides**
✔ **Prevents body scrolling while inside the slider**
✔ **Smooth transition between slides**

—

### **📌 Updated jQuery Code**

jQuery(document).ready(function ($) {
    let currentIndex = 0;
    const slides = $(".slide");
    const totalSlides = slides.length;
    let isScrolling = false;
    const sliderWrapper = $(".slider-wrapper");
    const sliderContainer = $(".slider-container");

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

    function isInsideSlider(event) {
        return $(event.target).closest(".slider-container").length > 0;
    }

    function handleNavigation(direction) {
        if (isScrolling) return;

        if (direction === "down") {
            currentIndex++;
        } else {
            currentIndex--;
        }
        if (currentIndex < 0) currentIndex = 0;
        if (currentIndex >= totalSlides) currentIndex = totalSlides - 1;

        scrollToSection(currentIndex);
    }

    // Handle Mouse Wheel Event Only Inside Slider
    sliderContainer.on("wheel", function (event) {
        if (isScrolling) return;
        event.preventDefault(); // Prevent default scrolling behavior
        handleNavigation(event.originalEvent.deltaY > 0 ? "down" : "up");
    });

    // Handle Keyboard Arrow Events Only Inside Slider
    $(document).on("keydown", function (event) {
        if (!isInsideSlider(event)) return; // Allow normal scrolling outside slider

        if (event.key === "ArrowDown") {
            handleNavigation("down");
        } else if (event.key === "ArrowUp") {
            handleNavigation("up");
        }
    });
});

—

### **📌 How This Works**
1. **Scrolling Works Only Inside `.slider-container`**
– Uses `.on("wheel")` **only inside** `.slider-container`.
– Prevents `event.preventDefault()` from affecting the whole page.

2. **Keyboard (Up/Down Arrows) Work Only Inside Slider**
– Checks if the **key event happens inside** `.slider-container`.
– Uses `isInsideSlider(event)` to limit control to the slider.

3. **Allows Normal Page Scrolling Outside**
– **Outside the slider?** → Normal scrolling resumes.
– **Inside the slider?** → Only slides switch, no body scroll.

—

### **📌 Required HTML Structure**

<div class="slider-container">
    <div class="slider-wrapper">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
    </div>
</div>

<div class="other-content">
    <p>Normal scrolling should work here...</p>
</div>

—

### **✅ Final Behavior**
🚀 **Wheel Scroll & Arrow Keys Work Inside the Slider**
🌍 **Normal Page Scroll Works Outside the Slider**
⚡ **Smooth Transition Between Slides**

🔥 Now your slider **only reacts inside its container** while allowing normal page scrolling outside! 🚀

User
but now scrolling not working smootlhly
Assistant
Got it! The scrolling should feel **smooth and natural** while staying inside the `.slider-container`. I'll improve the logic to make the transitions smoother and **prevent jumpy behavior** while scrolling quickly.

—

### **📌 Key Improvements in This Version**
✔ **Smooth slide transitions (with easing effect)**
✔ **Prevents scroll jumps when scrolling fast**
✔ **Natural scroll feel, not too restrictive**
✔ **Allows normal page scroll outside the slider**

—

### **📌 Optimized jQuery Code**

jQuery(document).ready(function ($) {
    let currentIndex = 0;
    const slides = $(".slide");
    const totalSlides = slides.length;
    let isScrolling = false;
    const sliderWrapper = $(".slider-wrapper");
    const sliderContainer = $(".slider-container");

    function scrollToSection(index) {
        if (index >= 0 && index < totalSlides) {
            isScrolling = true;
            let offset = index * -100;
            sliderWrapper.css({
                "transform": `translate(-50%, ${offset}vh)`,
                "transition": "transform 0.8s ease-in-out" // Smooth animation
            });
            slides.removeClass("active");
            slides.eq(index).addClass("active");
            setTimeout(() => isScrolling = false, 700); // Allow next scroll after transition
        }
    }

    function isInsideSlider(event) {
        return $(event.target).closest(".slider-container").length > 0;
    }

    function handleNavigation(direction) {
        if (isScrolling) return;

        if (direction === "down") {
            if (currentIndex < totalSlides - 1) {
                currentIndex++;
                scrollToSection(currentIndex);
            }
        } else {
            if (currentIndex > 0) {
                currentIndex--;
                scrollToSection(currentIndex);
            }
        }
    }

    // Handle Mouse Wheel Scroll Inside Slider Only
    sliderContainer.on("wheel", function (event) {
        if (isScrolling) return;
        event.preventDefault(); // Prevent default page scroll inside slider
        handleNavigation(event.originalEvent.deltaY > 0 ? "down" : "up");
    });

    // Handle Keyboard Arrow Keys Inside Slider Only
    $(document).on("keydown", function (event) {
        if (!isInsideSlider(event)) return; // Ignore key events outside slider

        if (event.key === "ArrowDown") {
            event.preventDefault();
            handleNavigation("down");
        } else if (event.key === "ArrowUp") {
            event.preventDefault();
            handleNavigation("up");
        }
    });
});

—

### **📌 How This Fixes Smooth Scrolling**
✅ **Added a CSS transition (`ease-in-out`) for better animation**
✅ **Increased timeout to 700ms to prevent double scroll jumps**
✅ **Prevents fast scrolling from skipping slides**
✅ **Ensures only one slide scrolls at a time**

—

### **📌 Required CSS for Smoothness**

.slider-wrapper {
    transition: transform 0.8s ease-in-out;
}

—

### **🎯 Final Behavior**
✅ **Scroll inside `.slider-container` feels smooth**
✅ **Arrow keys work naturally without delay**
✅ **Normal page scrolling still works outside**

🔥 Now your scrolling **feels smooth and intuitive** inside the slider! 🚀

User
but don't move cursor out side slider container under use broswer scroll
Assistant
Got it! You want to **allow smooth scrolling inside the `.slider-container`** while keeping the **cursor inside the section** until the slides are completely scrolled through. After reaching the last slide, normal browser scrolling should resume.

—

### **📌 Key Features in This Version**
✔ **Scroll locks inside `.slider-container` until last slide**
✔ **Mouse cursor stays inside the slider while scrolling**
✔ **Once last slide is reached, normal browser scroll resumes**
✔ **Smooth transitions with no scroll jumps**
✔ **Works with both Mouse Wheel and Arrow Keys**

—

### **📌 Updated jQuery Code**

jQuery(document).ready(function ($) {
    let currentIndex = 0;
    const slides = $(".slide");
    const totalSlides = slides.length;
    let isScrolling = false;
    const sliderWrapper = $(".slider-wrapper");
    const sliderContainer = $(".slider-container");

    function scrollToSection(index) {
        if (index >= 0 && index < totalSlides) {
            isScrolling = true;
            let offset = index * -100;
            sliderWrapper.css({
                "transform": `translate(-50%, ${offset}vh)`,
                "transition": "transform 0.8s ease-in-out"
            });
            slides.removeClass("active");
            slides.eq(index).addClass("active");
            setTimeout(() => isScrolling = false, 700);
        }
    }

    function isInsideSlider(event) {
        return $(event.target).closest(".slider-container").length > 0;
    }

    function handleNavigation(direction) {
        if (isScrolling) return;

        if (direction === "down") {
            if (currentIndex < totalSlides - 1) {
                currentIndex++;
                scrollToSection(currentIndex);
            } else {
                allowPageScroll();
            }
        } else {
            if (currentIndex > 0) {
                currentIndex--;
                scrollToSection(currentIndex);
            } else {
                preventPageScroll();
            }
        }
    }

    function preventPageScroll() {
        $("body").css("overflow", "hidden"); // Stop page scrolling
    }

    function allowPageScroll() {
        $("body").css("overflow", "auto"); // Allow normal scrolling
    }

    // Handle Mouse Wheel Scroll Inside Slider Only
    sliderContainer.on("wheel", function (event) {
        if (isScrolling) return;
        event.preventDefault(); // Prevent browser scroll inside slider
        handleNavigation(event.originalEvent.deltaY > 0 ? "down" : "up");
    });

    // Handle Keyboard Arrow Keys Inside Slider Only
    $(document).on("keydown", function (event) {
        if (!isInsideSlider(event)) return; // Ignore key events outside slider

        if (event.key === "ArrowDown") {
            event.preventDefault();
            handleNavigation("down");
        } else if (event.key === "ArrowUp") {
            event.preventDefault();
            handleNavigation("up");
        }
    });

    // Prevent default page scrolling when inside the slider
    sliderContainer.on("mouseenter", preventPageScroll);
    sliderContainer.on("mouseleave", allowPageScroll);
});

—

### **📌 How This Works**
✅ **Scroll is locked inside `.slider-container`**
✅ **Once all slides are seen, browser scroll resumes**
✅ **Mouse wheel and arrow keys work smoothly**
✅ **Prevents sudden jumps or flickering**

—

### **🎯 Final Behavior**
– **Scrolling is locked inside the slider until all slides are viewed.**
– **Once the last slide is reached, normal scrolling resumes.**
– **Cursor does not move out until the last slide is reached.**
– **Smooth scrolling experience inside the slider.**

🔥 Now your slider behaves exactly as needed! 🚀

User
don't hide scroll bar browser just in slider just untill cursor in section make slider work
Assistant
Got it! You want:
✔ **Smooth scrolling inside the `.slider-container`**
✔ **Normal browser scrolling outside the `.slider-container`**
✔ **Prevent browser scrolling while inside `.slider-container`**
✔ **No hiding of the browser scrollbar**
✔ **Allow natural page scrolling after the last slide is reached**

—

### **📌 Updated jQuery Code**

jQuery(document).ready(function ($) {
    let currentIndex = 0;
    const slides = $(".slide");
    const totalSlides = slides.length;
    let isScrolling = false;
    const sliderWrapper = $(".slider-wrapper");
    const sliderContainer = $(".slider-container");

    function scrollToSection(index) {
        if (index >= 0 && index < totalSlides) {
            isScrolling = true;
            let offset = index * -100;
            sliderWrapper.css({
                "transform": `translate(-50%, ${offset}vh)`,
                "transition": "transform 0.8s ease-in-out"
            });
            slides.removeClass("active");
            slides.eq(index).addClass("active");
            setTimeout(() => isScrolling = false, 700);
        }
    }

    function handleNavigation(direction) {
        if (isScrolling) return;

        if (direction === "down") {
            if (currentIndex < totalSlides - 1) {
                currentIndex++;
                scrollToSection(currentIndex);
            } else {
                allowPageScroll();
            }
        } else {
            if (currentIndex > 0) {
                currentIndex--;
                scrollToSection(currentIndex);
            }
        }
    }

    function preventPageScroll(event) {
        event.preventDefault();
    }

    function enableSliderScroll() {
        $(window).on("wheel touchmove", preventPageScroll);
    }

    function disableSliderScroll() {
        $(window).off("wheel touchmove", preventPageScroll);
    }

    // Handle Mouse Wheel Scroll Inside Slider Only
    sliderContainer.on("wheel", function (event) {
        if (isScrolling) return;
        event.preventDefault();
        handleNavigation(event.originalEvent.deltaY > 0 ? "down" : "up");
    });

    // Handle Keyboard Arrow Keys Inside Slider Only
    $(document).on("keydown", function (event) {
        if ($(event.target).closest(".slider-container").length === 0) return;

        if (event.key === "ArrowDown") {
            event.preventDefault();
            handleNavigation("down");
        } else if (event.key === "ArrowUp") {
            event.preventDefault();
            handleNavigation("up");
        }
    });

    // Enable slider scroll when inside
    sliderContainer.on("mouseenter", enableSliderScroll);
    sliderContainer.on("mouseleave", disableSliderScroll);
});

—

### **📌 How This Works**
✅ **Mouse scroll & arrow keys work only inside `.slider-container`**
✅ **When inside the slider, the browser scroll is blocked**
✅ **Once the user exits the `.slider-container`, normal scrolling resumes**
✅ **No hiding of the browser scrollbar**

—

### **🎯 Final Behavior**
– **When inside `.slider-container`, scrolling switches slides only**
– **Once user moves the cursor out, normal page scrolling works**
– **No sudden jumps or page freezes**
– **Smooth transitions between slides**

🔥 Now, **scrolling inside the slider is controlled**, and **browser scrolling works as expected outside!** 🚀

Leave a Comment

Your email address will not be published. Required fields are marked *