如何使用swiper寫輪播

之前大家都寫過(guò)輪播圖吧，相信在寫輪播圖的過(guò)程中也因?yàn)楫?dāng)中的某些細(xì)節(jié)煩惱過(guò)吧，接下來(lái)我給大家講述一個(gè)方便快捷的輪播圖吧！

Swiper常用于移動(dòng)端網(wǎng)站的內(nèi)容觸摸滑動(dòng)

1.第一步先引入css---swiper.css插件和JQ---swiper.js 插件,

然后呢就開(kāi)始寫輪播圖了

--首先定義一個(gè)容器
   
     --添加圖片
    
    
   
   --小圓點(diǎn)分頁(yè)器
   --上一頁(yè)
   --下一頁(yè)
  

如果想讓它動(dòng)起來(lái)，那就繼續(xù)來(lái)寫js吧

var mySwiper = new Swiper(".swiper-container",{
     autoplay:1000,--每秒中輪播一次
     loop:true,--可以讓圖片循環(huán)輪播
     autoplayDisableOnInteraction:false,--在點(diǎn)擊之后可以繼續(xù)實(shí)現(xiàn)輪播
     pagination:".swiper-pagination",--讓小圓點(diǎn)顯示
     paginationClickable:true,--實(shí)現(xiàn)小圓點(diǎn)點(diǎn)擊
     prevButton:".swiper-button-prev",--實(shí)現(xiàn)上一頁(yè)的點(diǎn)擊
     nextButton:".swiper-button-next",--實(shí)現(xiàn)下一頁(yè)的點(diǎn)擊
　　　　　　　　　　　　effect:"flip"--可以實(shí)現(xiàn)3D效果的輪播
    })

Swiper輪播的也有它的好處：

1.Swiper是純javascript打造的滑動(dòng)特效插件，面向手機(jī)、平板電腦等移動(dòng)終端。
　　2.Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏多圖切換等常用效果。
　　3.Swiper開(kāi)源、免費(fèi)、穩(wěn)定、使用簡(jiǎn)單、功能強(qiáng)大，是架構(gòu)移動(dòng)終端網(wǎng)站的重要選擇！

同時(shí)也有不足之處：(使用Swiper輪播插件ajax請(qǐng)求加載圖片時(shí)，無(wú)法滑動(dòng)的問(wèn)題)
因?yàn)閎anner圖是動(dòng)態(tài)創(chuàng)建的，在插件開(kāi)始初始化時(shí)，文檔流中沒(méi)用圖片，所以沒(méi)有創(chuàng)建相應(yīng)寬度，通過(guò)調(diào)整js加載順序，問(wèn)題還是沒(méi)有解決。
最后找到swiper插件 api 有屬性是可以根據(jù)內(nèi)容變動(dòng)，自動(dòng)初始化插件的，添加observer：true后問(wèn)題解決！

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ò)關(guān)于中文文檔不多，沒(méi)找著。）能夠讓開(kāi)發(fā)者生成個(gè)人獨(dú)有的分頁(yè)器（pagination），上下滑塊的按鈕

以及4個(gè)回調(diào)函數(shù)：1.onTouchStart
　　　　　　 2.onTouchMove
　　　　　　 3.onTouchEnd
　　　　　　 4.onSlideSwitch。
以上內(nèi)容是我個(gè)人總結(jié)，希望對(duì)各位有所幫助！

swiper輪播圖（逆向自動(dòng)切換類似于無(wú)限循環(huán)）

swiper插件輪播圖，默認(rèn)的輪播循序是會(huì)從右向左，第一張，第二張，第三張，然后肉眼可見(jiàn)是的從第三張從左到右倒回第一張，這樣就會(huì)有些視覺(jué)體驗(yàn)不高，

，不過(guò)還是能夠用swiper本身的特性更改成無(wú)限循環(huán)的輪播的。

HTML代碼

script代碼

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。