解決swiper.js中無縫輪播的問題。

tuniutech 發(fā)布于2019-08-30 14:05 / 3715人閱讀

摘要：根據(jù)公司需求需要對(duì)讓輪播無間隙播放，類似這種效果。通過查看代碼，發(fā)現(xiàn)這個(gè)類中有個(gè)屬性修改中的源碼，將這個(gè)屬性的值改為即可實(shí)現(xiàn)無縫隙輪播，就是這么簡(jiǎn)單。輪播有它的好處是純打造的滑動(dòng)特效插件，面向手機(jī)平板電腦等移動(dòng)終端。

根據(jù)公司需求需要對(duì)讓輪播無間隙播放，類似這種效果：http://www.16sucai.com/upload...。因?yàn)橥祽杏玫氖莝wiper.js插件編寫的。swiper.js自動(dòng)輪播的時(shí)候都會(huì)有自動(dòng)停頓，各種調(diào)研都沒有合適的方法，只有慢慢摸索。通過查看代碼，發(fā)現(xiàn).swiper-wrapper這個(gè)類中有個(gè)屬性：
transition-timing-function： ease;,修改swiper.js中css的源碼，將這個(gè)屬性的值改為linear即可實(shí)現(xiàn)無縫隙輪播，就是這么簡(jiǎn)單。transition-timing-function： linear
Swiper輪播有它的好處：

　　　　1.Swiper是純javascript打造的滑動(dòng)特效插件，面向手機(jī)、平板電腦等移動(dòng)終端。

　　　　2.Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏多圖切換等常用效果。

　　　　3.Swiper開源、免費(fèi)、穩(wěn)定、使用簡(jiǎn)單、功能強(qiáng)大，是架構(gòu)移動(dòng)終端網(wǎng)站的重要選擇！
　　　　
同時(shí)也有不足之處：(使用Swiper輪播插件ajax請(qǐng)求加載圖片時(shí)，無法滑動(dòng)的問題)

因?yàn)閎anner圖是動(dòng)態(tài)創(chuàng)建的，在插件開始初始化時(shí)，文檔流中沒用圖片，所以沒有創(chuàng)建相應(yīng)寬度，通過調(diào)整js加載順序，問題還是沒有解決。

最后找到swiper插件 api 有屬性是可以根據(jù)內(nèi)容變動(dòng)，自動(dòng)初始化插件的，添加observer：true后問題解決！

var mySwiper = new Swiper (".swiper-container", {
        pagination: ".swiper-pagination",
        autoplay: 5000,
        loop: true,
        observer:true,//修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
        observeParents:true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper
 })

Swiper擁有豐富的API接口。（不過關(guān)于中文文檔不多，沒找著。）能夠讓開發(fā)者生成個(gè)人獨(dú)有的分頁器（pagination），上下滑塊的按鈕

以及4個(gè)回調(diào)函數(shù)：1.onTouchStart

　　　　　　　　 2.onTouchMove

　　　　　　　　 3.onTouchEnd

　　　　　　　　 4.onSlideSwitch。

各位前端大俠，滿意的話希望支持下，點(diǎn)個(gè)贊，畢竟這是第一篇文章，謝謝！