有時(shí)候我們?cè)谧鲰?xiàng)目時(shí)，要用到輪播效果（不一定是banner輪播圖）的地方，自己寫(xiě)太麻煩，費(fèi)時(shí)間，一般都是使用已有的輪播插件，在這里我比較推薦swiper3，兼容性比較好，輪播效果齊全，基本上的輪播效果都有了，沒(méi)有的你也能通過(guò)已有的API自己寫(xiě)出來(lái)。
今天我們來(lái)說(shuō)下swiper3的雙向控制，兩個(gè)輪播圖可以相互控制其輪播，當(dāng)其中一個(gè)輪播時(shí)另一個(gè)也會(huì)跟著輪播。

如圖：
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)然我們這里需要寫(xiě)swiper3的API來(lái)實(shí)現(xiàn)些效果，如：
effect : 'fade',：默認(rèn)：false。關(guān)閉淡出。過(guò)渡時(shí)，原slide透明度為1（不淡出），過(guò)渡中的slide透明度從0->1（淡入），其他slide透明度0。
可選值：true。開(kāi)啟淡出。過(guò)渡時(shí)，原slide透明度從1->0（淡出），過(guò)渡中的slide透明度從0->1（淡入），其他slide透明度0。
loop : true,：設(shè)置為true 則開(kāi)啟loop模式。loop模式：會(huì)在原本slide前后復(fù)制若干個(gè)slide(默認(rèn)一個(gè))并在合適的時(shí)候切換，讓Swiper看起來(lái)是循環(huán)的。loop模式在與free模式同用時(shí)會(huì)產(chǎn)生抖動(dòng)，因?yàn)閒ree模式下沒(méi)有復(fù)制slide的時(shí)間點(diǎn)。
slidesPerView : 2,：設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量(carousel模式)。可以設(shè)置為數(shù)字（可為小數(shù)，小數(shù)不可loop），或者 'auto'則自動(dòng)根據(jù)slides的寬度來(lái)設(shè)定數(shù)量。loop模式下如果設(shè)置為'auto'還需要設(shè)置另外一個(gè)參數(shù)loopedSlides。
lazyLoading : true,：設(shè)為true開(kāi)啟圖片延遲加載，使preloadImages無(wú)效。需要將圖片img標(biāo)簽的src改寫(xiě)成data-src，并且增加類(lèi)名swiper-lazy。

文章標(biāo)題：前端開(kāi)發(fā)之Swiper3輪播插件的雙向控制
標(biāo)題來(lái)源：http://www.rwnh.cn/news/246527.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、云服務(wù)器

廣告

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