今天，我无意中看到这样一个东西，它叫做Swiper，这是一个开源免费的适用于各种移动端的触摸滑动插件。
看了一遍文档，发现并不是很难，于是打算动手自己写一个Swiper官网上的稍复杂点的小demo，看看自己理解的如何。
我所实现的功能是这样的：
这是一个超出后自适应的导航：
什么叫做超出后自适应呢？就是当我左右滑动内容部分的时候，上面导航部分会跟随显示当前导航nav，当我滑到第四页时，由于超过了当前显示的nav,导航栏会自行向下滑动一格，与内容栏保持一致。同时导航栏也是可以手动滑动的，当用户手动滑动导航栏，点击某一个板块（nav）时，下面的内容部分会随即滑到相应的内容块。

实现的JS代码如下：

/**
 * Created by 张丽娟 on 2017/7/10.
 */
window.onload = function () {
    var swiper1 = new Swiper(".swiper-container1" ,{
        slidesPerView:3,
        watchSlidesProgress : true,
        watchSlidesVisibility : true
    });   
    var swiper2 = new Swiper(".swiper-container2" ,{
        watchSlidesProgress : true,
        watchSlidesVisibility : true,
        onSlideNextStart:function(swiper){
            var $cur_slide = $(".swiper-slide.active",".swiper-container1 .sw1");
            if($cur_slide.next().hasClass("swiper-slide-visible")){
                $cur_slide.next().addClass("active").siblings().removeClass("active");
            }else{
                swiper1.slideNext();
                $cur_slide.next().addClass("active").siblings().removeClass("active");
            }
        },
        onSlidePrevStart:function (swiper) {
            var $cur_slide = $(".swiper-slide.active",".swiper-container1 .sw1");
            if($cur_slide.prev().hasClass("swiper-slide-visible")){
                $cur_slide.prev().addClass("active").siblings().removeClass("active");
            }else{
                swiper1.slidePrev();
                $cur_slide.prev().addClass("active").siblings().removeClass("active");
            }
        }
    });

    $(".swiper-slide",".swiper-container1 .sw1").click(function () {
        var targetIndex = swiper1.clickedIndex;
        //alert(targetIndex);
        $($(".swiper-slide",".swiper-container1 .sw1")[targetIndex]).addClass("active").siblings().removeClass("active");
        swiper2.slideTo(targetIndex, 500, false);
    })
};

使用Swiper插件可以很容易的实现移动端的滑动显示需求，Swiper文档中有很多的方法提供我们使用，
定制自定义的某些功能也比较方便，只要梳理好功能逻辑，然后灵活运用其方法即可。
但是通过写这个小的功能，我发现了一个问题：
当左右滑动内容部分的时候，需要快速滑动才能Swiper才能检测到滑动，并执行onSlideNextStart和onSlidePrevStart方法，如果缓慢的移动内容块，只能看到内容块的滑动完成，Swiper无法检测到滑动，因此无法执行onSlideNextStart和onSlidePrevStart方法。