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