Scroll Event for Slider

User
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 (sliderWrapper.is(":focus") && isSliderInView() && currentIndex < totalSlides – 1) {
event.preventDefault();
}
}

// Check if we have reached the last slide
function isLastSlide() {
return currentIndex === totalSlides – 1;
}

// Wheel event to scroll through slides
$(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);
}
}
});

// Update slide from URL hash
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 the slider when mouse enters or focus is on the wrapper area
sliderWrapper.on("mouseenter focusin", function () {
// If the user is on the last slide, reset the slider to the first slide
if (isLastSlide()) {
currentIndex = 0; // Reset to first slide
scrollToSection(currentIndex);
}

// Add wheel event listener only when wrapper is focused
window.addEventListener("wheel", preventBodyScroll, { passive: false });
});

// Remove wheel event listener when focus is lost
sliderWrapper.on("focusout", function () {
// If at the last slide, allow body scroll
if (isLastSlide()) {
window.removeEventListener("wheel", preventBodyScroll);
}
});

// Make sure to reset the scroll prevention when the last slide is reached
$(window).on("wheel", function (event) {
if (isLastSlide()) {
window.removeEventListener("wheel", preventBodyScroll); // Allow body scroll on last slide
}
});

// Make slider-wrapper focusable if not already
sliderWrapper.attr("tabindex", "0");

updateSliderHeight();
updateSlideFromHash();
});

jQuery(document).ready(function ($) {
$(".owl-carousel").owlCarousel({
loop: true,
margin: 10,
nav: false,
dots: true,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
animateOut: "fadeOut", // Smooth fade out effect
animateIn: "fadeIn", // Smooth fade in effect
responsive: {
0: { items: 1 },
600: { items: 1 },
1000: { items: 1 }
}
});
});
Its almost work but when in wrapper section i want don't move cursor if user start scroll using whell

Assistant
To prevent the cursor from moving when scrolling inside the `.slider-wrapper`, you can achieve this by disabling the default scroll behavior while still allowing the slides to transition.

### Solution:
Use `event.preventDefault()` properly inside the `wheel` event handler to block default scrolling while the user scrolls within `.slider-wrapper`.

### Updated Code:
Modify your `wheel` event listener inside the first `$(document).ready()` function:

$(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;

    event.preventDefault(); // Prevent default scrolling behavior

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

### What This Does:
1. **Stops the default scroll behavior (`event.preventDefault()`)** when the user scrolls inside `.slider-wrapper`.
2. **Ensures the event triggers only inside `.slider-wrapper`**.
3. **Allows slide transitions smoothly** without moving the page cursor.

Now, the user's cursor won't move when scrolling inside the slider section, and the slide transition will happen smoothly. ๐Ÿš€ Let me know if you need further refinements! ๐Ÿ˜Š

Leave a Comment

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