Tab切换Swiper轮播图

Swiper对于各位前端的朋友实在是福音,不仅开源,最关键但是好用。

Swiper地址:http://www.swiper.com.cn/

最近因为项目上的需求,需要切换两个轮播图。于是出现了一个很尴尬的问题,第一个Swiper可以正常切换,但是第二个轮播图却无法正常运行,卡顿。

检查了代码后发现问题主要来源于display:none;

我加上了这个隐藏属性后,第二个轮播一定会出问题。

最终解决方式:

1)需要加上这两个属性    

     observer:true,//启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。
默认false,不开启,可以使用update()方法更新。

     observeParents:true,//将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新

2)将display:none;这个隐藏的css换一中隐藏方式。

.hide{visibility: hidden;position: absolute;z-index: -1;height: 0;}

3)因为是有多个轮播图的,所以在实例化的时候,不能使用相同类型,最好分开。

var swiper = new Swiper('这里需要更改', {
    pagination: {

    el: '这里需要更改',

    clickable: true,

    },

 });

演示Demo:http://www.bright2017.top/test1/test1-12/

github下载地址:https://github.com/struggle20160730/test1.git

猜你喜欢

转载自blog.csdn.net/bright2017/article/details/80418548