'swiper.js i want the scrolling to stop at end of the section and stop scrolling to next slide on its own, then continue to normal scrolling

<body>
    <div class="swiper swiper1">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>


    </div>
    <div class="newContainer">
       
        <div class="container-wrapper">
            <!-- Slides -->
            <div class="container-slide">Slide 1</div>
            <div class="container-slide">Slide 2</div>
            <div class="container-slide">Slide 3</div>

        </div>


    </div>

</body>
    const swiper1 = new Swiper('.swiper1', {
    // Optional parameters
    direction: 'vertical',
    loop: false,
    speed: 1000,
    preventInteractionOnTransition: true,

    mousewheel: {
        invert: false,

        releaseOnEdges: true,
        sensitivity: 0
    }
});


swiper.js library Codepen Link: https://codepen.io/aldrinbright/pen/PoQqgjg

I want the scrolling to stop at Slide 3 and stop scrolling to next slide on its own, then continue to normal scrolling



Solution 1:[1]

It is hard to understand exactly what is your desire result.

Anyway by the API this how you dedect slide number 3.

swiper1.on('slideChange', function () {
  if(this.activeIndex == "2"){
    console.log("slide 3 active");
    /* do something */
  }
});

Maybe it is 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 Ezra Siton