swiper的切換方式一般為拖拽切換，滑動切換。
如果想要實現(xiàn)點擊每一個slide就切換成下一個slide，那么可以使用click方法實現(xiàn)。click方法 ：回調(diào)函數(shù)，當(dāng)你點擊或輕觸Swiper 后執(zhí)行，相當(dāng)于tap。
接受swiper實例和touchend事件作為參數(shù)。
注：Swiper5版本之前會有300ms延遲。
文檔鏈接：swiper-click方法
當(dāng)swiper開啟循環(huán)模式：loop設(shè)置為 true 則開啟循環(huán)(loop)模式。loop模式：會在原本slide 前后復(fù)制若干個slide (默認(rèn)一個)并在合適的時候切換，讓Swiper看起來像是循環(huán)的。
需要注意slide在開啟循環(huán)模式與未開啟循環(huán)模式的索引值變化。
以下swiper共有4個slide，當(dāng)?shù)谝槐檠h(huán)完成后，第二遍及以后循環(huán)時，第一個slide的索引值會變成5。第二個slide的索引值會變成2。文章來源：http://www.zghlxwxcb.cn/news/detail-577326.html
var swiper = new Swiper('.swiper-container', {
effect: 'fade',
loop:true,
autoplay: {
delay: 3000,
disableOnInteraction: true,
},
on:{
click: function(){
//當(dāng)切換到第一個slide的時候
if(this.activeIndex == 5) {
//控制Swiper切換到指定的slide
swiper.slideTo(2);
} else {
// this.activeIndex返回當(dāng)前活動塊(激活塊)的索引。loop模式下注意該值會被加上復(fù)制的slide數(shù)。
swiper.slideTo(this.activeIndex + 1);
}
},
},
});
如果對你有所幫助，請記得一鍵三聯(lián)哦文章來源地址http://www.zghlxwxcb.cn/news/detail-577326.html
到了這里，關(guān)于swiper實現(xiàn)點擊切換slide/圖片效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
