服務熱線 400-660-8066
網站建設
服務熱線 400-660-8066
網站建設
有時候我們在做項目時，要用到輪播效果（不一定是banner輪播圖）的地方，自己寫太麻煩，費時間，一般都是使用已有的輪播插件，在這里我比較推薦swiper3，兼容性比較好，輪播效果齊全，基本上的輪播效果都有了，沒有的你也能通過已有的API自己寫出來。
今天我們來說下swiper3的雙向控制，兩個輪播圖可以相互控制其輪播，當其中一個輪播時另一個也會跟著輪播。
如圖：
Swiper
1.params.control=Swiper2;Swiper
2.params.control=Swiper1;是控制相互輪播的關鍵。Swiper
1.params.control=Swiper2需要在Swiper2初始化后，Swiper1控制Swiper2，Swiper
2.params.control=Swiper1需要在Swiper1初始化后，Swiper2控制Swiper1。
當然我們這里需要寫swiper3的API來實現些效果，如：
effect：'fade'，：默認：false。關閉淡出。過渡時，原slide透明度為1（不淡出），過渡中的slide透明度從0-1（淡入），其他slide透明度0。
可選值：true。開啟淡出。過渡時，原slide透明度從1-0（淡出），過渡中的slide透明度從0-1（淡入），其他slide透明度0。
oop：true，：設置為true則開啟loop模式。loop模式：會在原本slide前后復制若干個slide(默認一個)并在合適的時候切換，讓Swiper看起來是循環(huán)的。loop模式在與free模式同用時會產生抖動，因為free模式下沒有復制slide的時間點。slidesPerView：2，：設置slider容器能夠同時顯示的slides數量(carousel模式)。可以設置為數字（可為小數，小數不可loop），或者'auto'則自動根據slides的寬度來設定數量。loop模式下如果設置為'auto'還需要設置另外一個參數loopedSlides。
azyLoading：true，：設為true開啟圖片延遲加載，使preloadImages無效。需要將圖片img標簽的src改寫成data-src，并且增加類名swiper-lazy。背景圖的延遲加載則增加屬性data-background。還可以為slide加一個預加載，pclass=swiper-lazy-preloader/p或者白色的pclass=swiper-lazy-preloaderswiper-lazy-preloader-white/
當你設置了slidesPerView：'auto'或者slidesPerView1，還需要開啟watchSlidesVisibility。
添加動力小姐姐微信
電話咨詢
400-660-8066
