有(yǒu)时候我们在做项目时，要用(yòng)到轮播效果（不一定是banner轮播图）的地方，自己写太麻烦，费时间，一般都是使用(yòng)已有(yǒu)的轮播插件，在这里我比较推荐swiper3，兼容性比较好，轮播效果齐全，基本上的轮播效果都有(yǒu)了，没有(yǒu)的你也能(néng)通过已有(yǒu)的API自己写出来。今天我们来说下swiper3的双向控制，两个轮播图可(kě)以相互控制其轮播，当其中(zhōng)一个轮播时另一个也会跟着轮播。如图：

Swiper1.params.control = Swiper2;Swiper2.params.control = Swiper1;是控制相互轮播的关键。Swiper1.params.control = Swiper2需要在Swiper2初始化后，Swiper1控制Swiper2，Swiper2.params.control = Swiper1需要在Swiper1初始化后，Swiper2控制Swiper1。当然我们这里需要写swiper3的API来实现些效果，如：effect : fade,：默认：false。关闭淡出。过渡时，原slide透明度為(wèi)1（不淡出），过渡中(zhōng)的slide透明度从0-1（淡入），其他(tā)slide透明度0。可(kě)选值：true。开启淡出。过渡时，原slide透明度从1-0（淡出），过渡中(zhōng)的slide透明度从0-1（淡入），其他(tā)slide透明度0。loop : true,：设置為(wèi)true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。loop模式在与free模式同用(yòng)时会产(chǎn)生抖动，因為(wèi)free模式下没有(yǒu)复制slide的时间点。slidesPerView : 2,：设置slider容器能(néng)够同时显示的slides数量(carousel模式)。可(kě)以设置為(wèi)数字（可(kě)為(wèi)小(xiǎo)数，小(xiǎo)数不可(kě)loop），或者 auto则自动根据slides的宽度来设定数量。loop模式下如果设置為(wèi)auto还需要设置另外一个参数loopedSlides。lazyLoading : true,：设為(wèi)true开启图片延迟加载，使preloadImages无效。需要将图片img标签的src改写成data-src，并且增加类名(míng)swiper-lazy。背景图的延迟加载则增加属性data-background。还可(kě)以為(wèi)slide加一个预加载，div class=swiper-lazy-preloader/div或者白色的div class=swiper-lazy-preloader swiper-lazy-preloader-white/div当你设置了slidesPerView:auto 或者 slidesPerView 1，还需要开启watchSlidesVisibility。

前端开发之Swiper3轮播插件的双向控制_成都网站搭建   /wangzhanzhizuo/11384.html