一款好用的轮播插件swiper，适用于移动端和web

swiper的dom布局

<div id="commentsSwiper" class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">滚动的item</div>
    </div>
</div>

注意：第一层div元素用来初始化swiper,因此class可自定义，第二层和第三层中dom的class必须含有这两个固定的样式，能够增长其余的自定义样式。

swiper的初始化

new jSwiper('#commentsSwiper', { direction: 'vertical', noSwiping: 'true', loop: true, autoplay: 3000, speed: 1000, autoplayDisableOnInteraction: false //当手动滑动后，依然保持自动轮播
});

 

注意：

一、container，wrapper，slider里面的样式必定不能有padding，或者是margin，不然滑动到最后一个的时候会被反弹回去，最后一个图片显示不出来；

二、若是初始化后在页面上的轮播没有效果，请检查下，轮播里面的图片是不是接口获取的，同时必定要保证图片渲染完成后再去初始化轮播插件；

一些具体的能够看 https://www.swiper.com.cn/api/grid/27.html