Single Scroll Slide Change

const delta = e.deltaY;
if (delta > 0) {
changeSlide('down');
} else if (delta < 0) {
changeSlide('up');
}

e.preventDefault();
}, { passive: false });
make above on single scroll it will change slide

Here's the refined and **debounced** version of your scroll event code that triggers the `changeSlide()` function on **each wheel scroll**, whether up or down:

let isThrottled = false;

$mainparent[0].addEventListener('wheel', function (e) {
    if (!isVisible || isThrottled) return;

    const delta = e.deltaY;

    if (delta > 0) {
        changeSlide('down');
    } else if (delta < 0) {
        changeSlide('up');
    }

    // Throttle to prevent firing too rapidly
    isThrottled = true;
    setTimeout(() => {
        isThrottled = false;
    }, 300); // Adjust timing as needed for smoothness

    e.preventDefault();
}, { passive: false });

### ✅ What this does:
– `isThrottled` prevents the function from being spammed during a fast scroll.
– `setTimeout` ensures you can scroll again after a short delay (e.g. 300ms).
– Works **on every single wheel scroll** (without waiting for 3 scrolls).

Let me know if you want it to be even more responsive or smoother!

if (scrollTop >= overlayOffset && scrollTop

Here’s how to revise your scroll logic so that **each time the scroll enters a new viewport slice**, it will update the slide only once for that section:

### ✅ Updated Scroll-Based Slider Code (one scroll = one slide change)

let lastScrollTop = 0;

$(window).on('scroll', function () {
    const scrollTop = $(window).scrollTop();
    const overlayOffset = $overlaySliderGrid.offset().top;
    const overlayHeight = $overlaySliderGrid.outerHeight();

    if (scrollTop >= overlayOffset && scrollTop <= overlayOffset + overlayHeight) {
        const relativeScroll = (scrollTop - overlayOffset) / overlayHeight;
        const newIndex = Math.floor(relativeScroll * $hoverItems.length);

        // Only update if newIndex is valid and changed
        if (newIndex !== currentIndex && newIndex >= 0 && newIndex < $hoverItems.length) {
            currentIndex = newIndex;
            updateSlider($hoverItems.eq(currentIndex));
        }
    }
});

### 🔍 Key Points
– `Math.floor(relativeScroll * totalItems)` converts the scroll position into an index zone.
– This way, the scroll area is divided into equal zones for each slide.
– Scrolling into a new zone triggers the slide change **immediately** — just once.

### ✅ Bonus Tip (Optional Smoother Slide Experience)
You can also **reduce the total height of each slide zone** to exaggerate the transition. For example:

const newIndex = Math.floor((scrollTop - overlayOffset) / (overlayHeight / $hoverItems.length));

This keeps the slider very responsive and changes on every small viewport shift.

Let me know if you want it scroll per viewport height like full-page scroll effects (like fullpage.js) — I can help with that too.