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

總結

以上是生活随笔為你收集整理的一款好用的轮播插件swiper，适用于移动端和web的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。