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