Swiper4.x使用方法
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css" rel="external nofollow" >
</head>
<body>
...
<script src="path/to/swiper.min.js"></script>
</body>
</html>
2.HTML内容。
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> <!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外
3.你可能想要给Swiper定义一个大小，当然不要也行。
.swiper-container {
width: 600px;
height: 300px;
}
4.初始化Swiper：最好是挨着</body>标签
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true, // 如果需要分页器
pagination: {
el: '.swiper-pagination',
}, // 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}, // 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>
如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
<script type="text/javascript">
window.onload = function() {
...
}
</script>
或者这样（Jquery和Zepto）
<script type="text/javascript">
$(document).ready(function () {
...
})
</script>
5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。
swiper坑
1.一个页面引用多个swiper插件，出现混乱问题；
解决方法： 1.实例化swiper时加上其父元素加以区分
2.Swiper加上ID或Class区分，要保留默认的类名swiper-container
如下：
<script>
var swiper = new Swiper('.course_banner2 .swiper-container', {
pagination: '.course_banner2 .swiper-pagination',
paginationClickable: true,
loop: true,
autoplay:
});
</script>
2. swiper隐藏之后，再显示，滑动不流畅，且无限滑动会失败；
解决方法： 添加一下两个属性
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
3.动态生成的swiper，如append()，或html()添加的，无限滑动效果失败；
解决方法：
a. 添加上面两个属性
b.把swiper方法写在动态生成的方法里面
如下所示：
function bigPic(comment_id) {
$('.win_pic').show();
$.post("{:U('Course/ajaxComment')}", {'c_id':comment_id}, function(data){
if(data.status == ){
$("#content").text(data.comment.c_content);
$(".swiper-wrapper").html('');
var html = '';
var images = data.comment.images;
for (var i=; i < images.length; i++) {
html += "<div class='swiper-slide'><img src=__ROOT__/" + images[i]['thumb_image'] + "></div>";
}
$(".swiper-wrapper").html(html); //swiper已动态生成
//实例化swiper
var swiper = new Swiper('.nav .swiper-container', {
pagination: '.nav .swiper-pagination',
paginationClickable: true,
centeredSlides: true,
autoplay: false,
autoplayDisableOnInteraction: false,
paginationType: 'fraction',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
loop: true,
paginationFractionRender: function(swiper, currentClassName, totalClassName) {
return '<span class="' + currentClassName + '"></span>' +
'/' +
'<span class="' + totalClassName + '"></span>';
}
})
}
console.log(data);
}, "json"); }
4.移动端使用swiper需加onTouchStart、onTouchEnd，下拉时轮播停止BUG。（针对 apicloud 开发)
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
loop: true,
paginationClickable: true,
centeredSlides: true,
autoplay: ,
autoplayDisableOnInteraction: false,
onTouchStart: function(swiper) {
api.setFrameAttr({
name: api.frameName,
bounces: false
});
},
onTouchEnd: function(swiper) {
api.setFrameAttr({
name: api.frameName,
bounces: true
});
}
});
官网网址:http://www.swiper.com.cn/
