中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

2023-03-20    分類: 網(wǎng)站建設(shè)

HTML代碼

輪播圖在網(wǎng)站中使用的比例非常之高,自己手寫一個輪播比較費時間,而使用swiper(swiper3)輪播插件能很方便做出圖片輪播效果,兼容性好,而且還支持響應(yīng)式輪播。在項目引入swiper.jquery.min.js和swiper.jquery.min.css文件,html如圖:
JS代碼
js如圖:
如此一個簡單的輪播圖就制作完成了,當(dāng)然一般網(wǎng)站的輪播圖不會如此簡單,這里就需用到swiper的api了,js如圖:

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’ 圓點(默認(rèn))、‘fraction’ 分式、‘progress’ 進度條、‘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中的位置比例進行控制。
Observer:啟動動態(tài)檢查器(OB/觀眾/觀看者),當(dāng)改變swiper的樣式(例如隱藏/顯示)或者修改swiper的子元素時,自動初始化swiper。默認(rèn)false,不開啟,可以使用update()方法更新。
onTransitionEnd(swiper):回調(diào)函數(shù),過渡結(jié)束時觸發(fā),接收Swiper實例作為參數(shù)。
如果你使用setWrapperTranslate和setWrapperTransition來設(shè)定wrapper移動,這個函數(shù)不會觸發(fā),你可以使用原生transitionEnd事件。

分享標(biāo)題:網(wǎng)站前端開發(fā)Swiper3輪播插件的使用
本文來源:http://www.rwnh.cn/news/245914.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、營銷型網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、App開發(fā)網(wǎng)站營銷、ChatGPT

廣告

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

成都定制網(wǎng)站建設(shè)
新民市| 铜山县| 潼南县| 沁水县| 泽库县| 河曲县| 重庆市| 梅州市| 滁州市| 中方县| 九台市| 昭平县| 阳信县| 琼中| 驻马店市| 甘德县| 息烽县| 宝山区| 景德镇市| 商都县| 安陆市| 灵山县| 阿坝| 元阳县| 涡阳县| 会昌县| 湖北省| 岱山县| 双峰县| 江华| 高密市| 江油市| 屯留县| 松江区| 疏附县| 新宁县| 莱州市| 克山县| 久治县| 双桥区| 连平县|