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