如何使用swiper寫輪播

以前你們都寫過輪播圖吧，相信在寫輪播圖的過程當中也由於當中的某些細節煩惱過吧，接下來我給你們講述一個方便快捷的輪播圖吧！

Swiper經常使用於移動端網站的內容觸摸滑動

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

   而後呢就開始寫輪播圖了

<div class="swiper-container">--首先定義一個容器
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="" /></div> --添加圖片
                <div class="swiper-slide"><img src="" /></div>
                <div class="swiper-slide"><img src="" /></div>
            </div>
            <div class="swiper-pagination"></div>--小圓點分頁器
            <div class="swiper-button-prev"></div>--上一頁
            <div class="swiper-button-next"></div>--下一頁
        </div>

若是想讓它動起來，那就繼續來寫js吧

var mySwiper = new Swiper(".swiper-container",{
                    autoplay:1000,--每秒中輪播一次
                    loop:true,--可讓圖片循環輪播
                    autoplayDisableOnInteraction:false,--在點擊以後能夠繼續實現輪播
                    pagination:".swiper-pagination",--讓小圓點顯示
                    paginationClickable:true,--實現小圓點點擊
                    prevButton:".swiper-button-prev",--實現上一頁的點擊
                    nextButton:".swiper-button-next",--實現下一頁的點擊
　　　　　　　　　　　　effect:"flip"--能夠實現3D效果的輪播
                })

 

Swiper輪播的也有它的好處：

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

　　　　2.Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等經常使用效果。

　　　　3.Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！

 

 

同時也有不足之處：(使用Swiper輪播插件ajax請求加載圖片時，沒法滑動的問題)

由於banner圖是動態建立的，在插件開始初始化時，文檔流中沒用圖片，因此沒有建立相應寬度，經過調整js加載順序，問題仍是沒有解決。

最後找到swiper插件 api 有屬性是能夠根據內容變更，自動初始化插件的，添加observer：true後問題解決！

 

var mySwiper = new Swiper ('.swiper-container', {

        pagination: '.swiper-pagination',

        autoplay: 5000,

        loop: true,

        observer:true,//修改swiper本身或子元素時，自動初始化swiper

        observeParents:true,//修改swiper的父元素時，自動初始化swiper

 }) 

 

Swiper擁有豐富的API接口。（不過關於中文文檔很少，沒找着。）可以讓開發者生成我的獨有的分頁器（pagination），上下滑塊的按鈕

以及4個回調函數：1.onTouchStart

　　　　　　　　  2.onTouchMove

　　　　　　　　  3.onTouchEnd

　　　　　　　　  4.onSlideSwitch。 

 

以上內容是我我的總結，但願對各位有所幫助！