0


swiper实现点击切换slide/图片效果

swiper的切换方式一般为拖拽切换,滑动切换。
如果想要实现点击每一个slide就切换成下一个slide,那么可以使用click方法实现。
**

click方法

** :回调函数,当你点击或轻触Swiper 后执行,相当于tap。
接受swiper实例和touchend事件作为参数。
注:Swiper5版本之前会有300ms延迟。
文档链接:swiper-click方法

当swiper开启循环模式:loop设置为 true 则开启循环(loop)模式。loop模式:会在原本slide 前后复制若干个slide (默认一个)并在合适的时候切换,让Swiper看起来像是循环的。

需要注意slide在开启循环模式与未开启循环模式的索引值变化。

以下swiper共有4个slide,当第一遍循环完成后,第二遍及以后循环时,第一个slide的索引值会变成5。第二个slide的索引值会变成2。

var swiper =newSwiper('.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);}},},});

如果对你有所帮助,请记得一键三联哦

标签: javascript 前端 html

本文转载自: https://blog.csdn.net/weixin_49098968/article/details/129008245
版权归原作者 保持好运 所有, 如有侵权,请联系我们删除。

“swiper实现点击切换slide/图片效果”的评论:

还没有评论