一款好用的轮播插件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 //当手动滑动后，依然保持自动轮播
});

 

注意：

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

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

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

转载于:https://www.cnblogs.com/panyujun/p/9798696.html