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

前端開發(fā)之Swiper3輪播插件的雙向控制

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

有時候我們在做項目時,要用到輪播效果(不一定是banner輪播圖)的地方,自己寫太麻煩,費時間,一般都是使用已有的輪播插件,在這里我比較推薦swiper3,兼容性比較好,輪播效果齊全,基本上的輪播效果都有了,沒有的你也能通過已有的API自己寫出來。
今天我們來說下swiper3的雙向控制,兩個輪播圖可以相互控制其輪播,當(dāng)其中一個輪播時另一個也會跟著輪播。

前端代碼1

前端代碼2

如圖:
Swiper1.params.control = Swiper2;Swiper2.params.control = Swiper1;是控制相互輪播的關(guān)鍵。Swiper1.params.control = Swiper2需要在Swiper2初始化后,Swiper1控制Swiper2,Swiper2.params.control = Swiper1需要在Swiper1初始化后,Swiper2控制Swiper1。
當(dāng)然我們這里需要寫swiper3的API來實現(xiàn)些效果,如:
effect : 'fade',:默認(rèn):false。關(guān)閉淡出。過渡時,原slide透明度為1(不淡出),過渡中的slide透明度從0->1(淡入),其他slide透明度0。
可選值:true。開啟淡出。過渡時,原slide透明度從1->0(淡出),過渡中的slide透明度從0->1(淡入),其他slide透明度0。
loop : true,:設(shè)置為true 則開啟loop模式。loop模式:會在原本slide前后復(fù)制若干個slide(默認(rèn)一個)并在合適的時候切換,讓Swiper看起來是循環(huán)的。loop模式在與free模式同用時會產(chǎn)生抖動,因為free模式下沒有復(fù)制slide的時間點。
slidesPerView : 2,:設(shè)置slider容器能夠同時顯示的slides數(shù)量(carousel模式)??梢栽O(shè)置為數(shù)字(可為小數(shù),小數(shù)不可loop),或者 'auto'則自動根據(jù)slides的寬度來設(shè)定數(shù)量。loop模式下如果設(shè)置為'auto'還需要設(shè)置另外一個參數(shù)loopedSlides。
lazyLoading : true,:設(shè)為true開啟圖片延遲加載,使preloadImages無效。需要將圖片img標(biāo)簽的src改寫成data-src,并且增加類名swiper-lazy。
背景圖的延遲加載則增加屬性data-background。還可以為slide加一個預(yù)加載,<div class="swiper-lazy-preloader"></div>或者白色的<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

本文名稱:前端開發(fā)之Swiper3輪播插件的雙向控制
新聞來源:http://m.rwnh.cn/news27/246527.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計、企業(yè)網(wǎng)站制作、靜態(tài)網(wǎng)站、微信公眾號、營銷型網(wǎng)站建設(shè)、網(wǎng)站策劃

廣告

聲明:本網(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)

微信小程序開發(fā)
永宁县| 安西县| 宜君县| 饶河县| 洪湖市| 河曲县| 长治市| 从江县| 彰化县| 舒兰市| 浦城县| 许昌县| 利辛县| 荆州市| 万盛区| 东至县| 福贡县| 余庆县| 睢宁县| 柏乡县| 阳东县| 冕宁县| 皋兰县| 荣昌县| 托克托县| 西丰县| 偃师市| 藁城市| 深泽县| 深圳市| 娄底市| 扶沟县| 桦川县| 曲阜市| 新昌县| 庄浪县| 海城市| 遂昌县| 双鸭山市| 乐东| 当阳市|