Continue to scroll after Swiper.js last slide

Question

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

Titos

Answer 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.

Zamora

ref. swiperjs.com/swiper-api#mousewheel-control – Aurelia

Answer 2

Ramy's answer above worked for me, but just to add if you're using react you can add the params as below

 <Swiper
      className="mySwiper max-h-[400px] w-full max-w-[100vw]  overflow-hidden  "
      direction={'vertical'}
      slidesPerView={1}
      spaceBetween={30}
      mousewheel={{
        forceToAxis: true,
        sensitivity: 1,
        releaseOnEdges: true,
      }}
      modules={[Mousewheel]}
    >

Duty

Answer 3

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

},"

this not work on mobile

Claudioclaudius