網(wǎng)站前端開發(fā)Swiper3輪播插件的使用

輪播圖在網(wǎng)站中使用的比例非常之高，自己手寫一個輪播比較費(fèi)時間，而使用swiper（swiper3）輪播插件能很方便做出圖片輪播效果，兼容性好，而且還支持響應(yīng)式輪播。在項目引入swiper.jquery.min.js和swiper.jquery.min.css文件，html如圖：

js如圖：
如此一個簡單的輪播圖就制作完成了，當(dāng)然一般網(wǎng)站的輪播圖不會如此簡單，這里就需用到swiper的api了，js如圖：

這里面包含的自動、循環(huán)、響應(yīng)式、控制按鈕、顯示個數(shù)等功能的輪播，當(dāng)然swiper的功能不止這些，還有很多的api實現(xiàn)的功能。
更多功能Api：
onSlideChangeEnd(swiper)：回調(diào)函數(shù)，swiper從一個slide過渡到另一個slide結(jié)束時執(zhí)行?？山邮躶wiper實例作為參數(shù)。
Effect：slide的切換效果，默認(rèn)為"slide"（位移切換），可設(shè)置為"fade"（淡入）"cube"（方塊）"coverflow"（3d流）"flip"（3d翻轉(zhuǎn)）。
paginationType：分頁器樣式類型，可選：‘bullets’ 圓點(diǎn)（默認(rèn)）、‘fraction’ 分式、‘progress’ 進(jìn)度條、‘custom’ 自定義。
lazyLoading：設(shè)為true開啟圖片延遲加載，使preloadImages無效。
需要將圖片img標(biāo)簽的src改寫成data-src，并且增加類名swiper-lazy。
背景圖的延遲加載則增加屬性data-background。當(dāng)設(shè)置了slidesPerView:'auto' 或者 slidesPerView > 1，還需要開啟watchSlidesVisibility。
controlBy：設(shè)定Swiper相互控制時的控制方式。當(dāng)兩個swiper的slide數(shù)量不一致時可用。默認(rèn)為'slide'，自身切換一個slide時，被控制方也切換一個slide。
可選：'container'，按自身slide在container中的位置比例進(jìn)行控制。
Observer：啟動動態(tài)檢查器(OB/觀眾/觀看者)，當(dāng)改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時，自動初始化swiper。默認(rèn)false，不開啟，可以使用update()方法更新。
onTransitionEnd(swiper):回調(diào)函數(shù)，過渡結(jié)束時觸發(fā)，接收Swiper實例作為參數(shù)。

新聞名稱：網(wǎng)站前端開發(fā)Swiper3輪播插件的使用
本文路徑：http://muchs.cn/news14/245914.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、App開發(fā)、微信小程序、外貿(mào)建站、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)