Slider Scrolling Optimization

function updateSliderHeight() {
let slideHeight = window.innerHeight;
slides.css("height", slideHeight + "px");
}

function scrollToSection(index, updateHash = true) {
if (index >= 0 && index < totalSlides) {
isScrolling = true;
let offset = index * -window.innerHeight;
sliderWrapper.css("transform", `translate(-50%, ${offset}px)`);
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() && currentIndex < totalSlides – 1) {
event.preventDefault();
}
}

// Updated wheel event to check if the mouse is within the slider-wrapper
$(window).on("wheel", function (event) {
if (!sliderWrapper.is(event.target) && !sliderWrapper.has(event.target).length) return; // Ensure it is inside the slider-wrapper

if (!isSliderInView()) return;

if (isScrolling) return;

if (event.originalEvent.deltaY > 0) {
if (currentIndex < totalSlides – 1) {
event.preventDefault();
currentIndex++;
scrollToSection(currentIndex);
}
} else {
if (currentIndex > 0) {
event.preventDefault();
currentIndex–;
scrollToSection(currentIndex);
}
}
});

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("resize", function () {
updateSliderHeight();
scrollToSection(currentIndex, false);
});

updateSliderHeight();
updateSlideFromHash();
});
when again wrapper area then start slider again

Here’s how you can modify your existing script to accomplish that:

### **Updated 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 updateSliderHeight() {
        let slideHeight = window.innerHeight;
        slides.css("height", slideHeight + "px");
    }

    function scrollToSection(index, updateHash = true) {
        if (index >= 0 && index < totalSlides) {
            isScrolling = true;
            let offset = index * -window.innerHeight;
            sliderWrapper.css("transform", `translate(-50%, ${offset}px)`);
            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() && currentIndex < totalSlides - 1) {
            event.preventDefault();
        }
    }

    // Scroll event for mouse wheel inside the slider-wrapper
    $(window).on("wheel", function (event) {
        if (!sliderWrapper.is(event.target) && !sliderWrapper.has(event.target).length) return;

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

    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("resize", function () {
        updateSliderHeight();
        scrollToSection(currentIndex, false);
    });

    // Restart slider when the user re-enters the slider-wrapper
    sliderWrapper.on("mouseenter", function () {
        currentIndex = 0;
        scrollToSection(currentIndex);
    });

    updateSliderHeight();
    updateSlideFromHash();
});

### **What’s Changed?**
1. **Restarting the Slider on Re-Entry:**
– Added an event listener for `mouseenter` on `.slider-wrapper`.
– When the user enters the `.slider-wrapper` again, the slider resets to the first slide.

2. **Preserves Smooth Scrolling & Hash Updates:**
– The function `scrollToSection(0)` ensures the slider scrolls back smoothly.
– The hash in the URL (`#slide-1`) is updated accordingly.

Now, when the user leaves and re-enters the slider area, the slides will restart from the first slide. 🚀