一款好用的輪播插件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