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

本文介绍: 如果想要实现点击每一个 slide就切换成下一个 slide，点击即可切换，那么可以使用 click 方法实现。

swiper的切换方式一般为拖拽切换，滑动切换。
如果想要实现点击每一个 slide就切换成下一个 slide，那么可以使用 click 方法实现。
click方法 ：回调函数，当你点击或轻触Swi per 后执行，相当于t ap。
接受s wi per 实例和touchend 事件作为参数。
注：Swi per5版本之前会有300ms 延迟。
文档链接：swiper-click方法

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

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

以下s wi per共有4个slide，当第一遍循环完成后，第二遍及以后循环时，第一个 slide的索引值会变成5。第二个slide的索引值会变成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);
            }
        },
    },
});