The switching method of swiper is generally drag-and-drop switching and sliding switching.
If you want to switch to the next slide by clicking each slide, you can use the click method.
click方法: Callback function, executed when you click or touch Swiper, which is equivalent to tap.
Accepts a swiper instance and a touchend event as parameters.
Note: There will be a 300ms delay before the Swiper5 version.
Document link : swiper-click method
When the swiper turns on the loop mode: loop is set to true to turn on the loop (loop) mode. Loop mode: Several slides will be copied before and after the original slide (default one) and switched when appropriate, making Swiper look like a loop.
It should be noted that the index value of the slide changes when the loop mode is enabled and when the loop mode is not enabled.
The following swiper has a total of 4 slides. After the first cycle is completed, the index value of the first slide will become 5 when the second cycle is completed. The index value of the second slide will become 2.
var swiper = new Swiper('.swiper-container', {
effect: 'fade',
loop:true,
autoplay: {
delay: 3000,
disableOnInteraction: true,
},
on:{
click: function(){
//当切换到第一个slide的时候
if(this.activeIndex == 5) {
//控制Swiper切换到指定的slide
swiper.slideTo(2);
} else {
// this.activeIndex返回当前活动块(激活块)的索引。loop模式下注意该值会被加上复制的slide数。
swiper.slideTo(this.activeIndex + 1);
}
},
},
});
If it is helpful to you, please remember to click triple link