全站搜索

前端开发之Swiper3轮播插件的双向控制

网站开发 300

有时候我们在做项目时,要用到轮播效果(不一定是banner轮播图)的地方,自己写太麻烦,费时间,一般都是使用已有的轮播插件,在这里我比较推荐swiper3,兼容性比较好,轮播效果齐全,基本上的轮播效果都有了,没有的你也能通过已有的API自己写出来。

今天我们来说下swiper3的双向控制,两个轮播图可以相互控制其轮播,当其中一个轮播时另一个也会跟着轮播。

如图:

 

 

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透明度为1(不淡出),过渡中的slide透明度从0->1(淡入),其他slide透明度0。

可选值:true。开启淡出。过渡时,原slide透明度从1->0(淡出),过渡中的slide透明度从0->1(淡入),其他slide透明度0。

loop : true,:设置为true 则开启loop模式。loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。 loop模式在与free模式同用时会产生抖动,因为free模式下没有复制slide的时间点。

slidesPerView : 2,:设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字(可为小数,小数不可loop),或者 ‘auto’则自动根据slides的宽度来设定数量。loop模式下如果设置为’auto’还需要设置另外一个参数loopedSlides。

lazyLoading : true,:设为true开启图片延迟加载,使preloadImages无效。需要将图片img标签的src改写成data-src,并且增加类名swiper-lazy。

背景图的延迟加载则增加属性data-background。还可以为slide加一个预加载,<div class=”swiper-lazy-preloader”></div>或者白色的<div class=”swiper-lazy-preloader swiper-lazy-preloader-white”></div>

当你设置了slidesPerView:’auto’ 或者 slidesPerView > 1,还需要开启watchSlidesVisibility。

上一篇: 下一篇:

相关推荐

  • 网站设计成功吗?对照用户体验指标查验!

    267

    用户体验是一个网站设计成功与否的核心。那么,当建站公司向客户交付了一个网站,该网站的用户体验如何呢?如何以量化一个网站的用户体验呢?我们精选了如下指标,来判断一个网站的用户体验。   任务的成功率任务成功率是最广泛使用和最容易理解的用户体验指标...

    查看全文
  • 2021年企业做网站:要问五个问题!

    273

    网站已死? 逻辑挺对。论设备,移动设备远超PC,至少PC网站已经不需要了吧。论流量,搜索引擎新增流量接近枯竭,来到网站的就更少;论营销,自媒体、新媒体的营销效果似乎好过网站;论订单,看网站下订单的年代,已经一去不回。 网站还在! 如果你是一家工程公司...

    查看全文
  • 中英文网站同一个后台的开发难点与思路

    267

    如果需要重新开发一个后台,并不是复制粘贴一份代码这么简单,后台前后端的程序代码都需要重构,前端页面也需要重新去填充数据,实现思路简单,但是如果只有思路就能办成事的话,那所有事情都简单很多了,要做好这些功能,确保没有使用bug,需要时间去重构,去测试拿...

    查看全文
展开更多