'Continue to scroll after Swiper.js last slide

I'm needing some help with Swiper.js

I have a site I'm working on https://www.paradev.co.uk/ee-live/home-alt/ and what I want to happen is after the last slide the user can continue to scroll down to rest of the page and then on scrolling up the slider works again with the mousewheel.

I've had to add the 'slide Down' text and arrow to allow the jump to the next section. This isn't ideal and will get deleted once it's working correctly.

I've managed to get what I want by adding the function slideChangeTransitionEnd and disabling the mousweheel. This does what I want for scrolling down and past the container but I can't find a way to reverse it for scrolling back up.

    var swiper = new Swiper(".mySwiper", {
    direction: "vertical",
    slidesPerView: 1,
    direction: "vertical",
    slidesPerView: 1,
    speed: 1000,
    spaceBetween: 0,
    roundLengths: true,
    centeredSlides: true,
    mousewheel: {
      forceToAxis: true,
      sensitivity: 1,
      releaseOnEdges: true,
    },
    mousewheel: true,
    pagination: {
    el: ".swiper-pagination",
    clickable: false,
    },
    });

    swiper.on('slideChangeTransitionEnd', function () {
      swiper.mousewheel.disable();
    });

Any ideas? Thanks.

NOTE The swiper is in a section with the ID of 'slider' The section below has an ID of 'festivals'. If this offers an alternative way

mousewheelswiper.js


Solution 1:[1]

I think, It's too rate to fix your issue.

I was dealing with same problem as you today. But, finally I solved that problem.

try romove below option.

mousewheel: true,

and just leave below options.

"mousewheel: {
    forceToAxis: true,
    sensitivity: 1,
    releaseOnEdges: true,
},"

That's how I handled the problem. I hope it will be helpful.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 RAMY LEE

Related Questions