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,
},
});
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,
},
});
最终实例html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>切换轮播</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
<style type="text/css">
.hide{visibility: hidden;position: absolute;z-index: -1;height: 0;}
.demo{width: 100%;height: 40px;border-bottom: 1px solid #ccc;overflow: hidden;}
.demo>div{display: inline-block;width: 150px;height: 40px;line-height: 40px;text-align: center;cursor: pointer;}
.demo2{width: 100%;height: 100px;}
.demo2>div{position: relative;}
img{width:100%;height:350px;}
.Color{color: red !important;}
</style>
</head>
<body>
<div class="demo">
<div class="Color">左边</div>
<div>右边</div>
</div>
<div class="demo2">
<div class="Img1">
<div class="swiper-container Img1-1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://www.mbkfw.com/static/image/lazy.gif" class="lazy" original="img/20150523203539_w8SeG.jpeg" alt="..."/>
</div>
<div class="swiper-slide">
<img src="https://www.mbkfw.com/static/image/lazy.gif" class="lazy" original="img/23b58PICDUg_1024.PNG" alt="..."/>
</div>
<div class="swiper-slide">
<img src="https://www.mbkfw.com/static/image/lazy.gif" class="lazy" original="https://g.mbkfw.com/skin/xhdtmubanskin/image/nopic.gif" alt="..."/>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination Img1-2"></div>
<!-- Add Arrows -->
<div class="swiper-button-next Img1-3"></div>
<div class="swiper-button-prev Img1-4"></div>
</div>
</div>
<div class="Img2 hide">
<div class="swiper-container Img2-1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://www.mbkfw.com/static/image/lazy.gif" class="lazy" original="https://g.mbkfw.com/skin/xhdtmubanskin/image/nopic.gif" alt="..."/>
</div>
<div class="swiper-slide">
<img src="https://www.mbkfw.com/static/image/lazy.gif" class="lazy" original="https://g.mbkfw.com/skin/xhdtmubanskin/image/nopic.gif" alt="..."/>
</div>
<div class="swiper-slide">
<img src="https://www.mbkfw.com/static/image/lazy.gif" class="lazy" original="https://g.mbkfw.com/skin/xhdtmubanskin/image/nopic.gif" alt="..."/>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination Img2-2"></div>
<!-- Add Arrows -->
<div class="swiper-button-next Img2-3"></div>
<div class="swiper-button-prev Img2-4"></div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var swiper = new Swiper('.Img1-1', {
spaceBetween: 10,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.Img1-2',
clickable: true,
},
observer:true,
observeParents:true,
navigation: {
nextEl: '.Img1-3',
prevEl: '.Img1-4',
},
});
var swiper2 = new Swiper('.Img2-1', {
spaceBetween: 10,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.Img2-2',
clickable: true,
},
observer:true,
observeParents:true,
navigation: {
nextEl: '.Img2-3',
prevEl: '.Img2-4',
},
});
$(".demo>div").click(function(){
var index=$(this).index();
$(".demo2").children("div").eq(index).removeClass("hide").siblings().addClass("hide");
$(this).addClass("Color").siblings().removeClass("Color");
});
});
</script>
</body>
</html>
川公网安备 51010702002669号
18605917465
客服QQ