javascript - swiper插件怎么监听滑动事件？

Question

如题，我想监听swiper滑动事件，当它滑动时执行一些东西？

Answer 1

http://www.swiper.com.cn/api/...
直接看api吧

Answer 2

var startY,startX,endX,endY;
var mySwiper = new Swiper('.swiper-container',{
    preventClicks : true,
    pagination: '.swiper-pagination',
    paginationClickable: '.swiper-pagination',
    preventLinksPropagation : true,
    spaceBetween: 30,
    effect: 'fade',
    onSlideChangeEnd:function(swiper){
       alert(swiper.activeIndex+'');
       // swiper.activeIndex 这个就是索引， 从 0 开始！ 可看一共有多少元素！
    },
    onTouchStart: function(swiper,event){
        var touch = event.touches[0];
        startY = touch.pageY;
        startX = touch.pageX;
    },
    onTouchMove: function(swiper,event){
        var touch = event.touches[0];
        endX = touch.pageX-startX;
        endY = touch.pageY-startY;
    },
    onTouchEnd: function(swiper){
        if(Math.abs(endX)>5){
            endX=0;
            return false;
        }else{
            var href;
           switch (swiper.index){
               case 1:
                   href = "https://m.jrj.com.cn/yi/prd/prdxq?type=sr";
               case 2:
                   href = "https://m.jrj.com.cn/yi/prd/prdxq?type=sr";
               case 3:
                   href = "https://m.jrj.com.cn/yi/prd/prdxq?type=sr";
               case 4:
                   href = "https://m.jrj.com.cn/yi/prd/prdxq?type=sr";
            }
            self.location = href;
            endX=0;
        }
    }

});

HTML

<p class="swiper-container swiper-container-horizontal"   >
    <p class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
        <p class="swiper-slide blue-slide swiper-slide-active"  style="background-image:url(https://newimg.jrj.com.cn/2016/12/20161216170436288.jpg)">
            <span style="text-align: center;display: inline-block;width: 100%;height: 100%;" ></span>
        </p>
        <p class="swiper-slide red-slide swiper-slide-next" style="background-image:url(https://newimg.jrj.com.cn/2016/12/20161216170435896.jpg)">
            <span style="text-align: center;display: inline-block;width: 100%;height: 100%;" ></span>
          </p>
        <p class="swiper-slide orange-slide" style="background-image:url(https://newimg.jrj.com.cn/2016/12/20161216170406833.jpg)" >
            <span style="text-align: center;display: inline-block;width: 100%;height: 100%;"></span>
        </p>
        <p class="swiper-slide orange-slide" style="background-image:url(https://newi0.jrj.com.cn/bxcsv2016/banner-lb.png)" >
            <span style="text-align: center;display: inline-block;width: 100%;height: 100%;"></span>
        </p>
    </p>
    <p class="swiper-pagination swiper-pagination-white"></p>
</p>