Swiper4.x使用方法
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> </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 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</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 {
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: 2500
});
</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 == 1){ $("#content").text(data.comment.c_content); $(".swiper-wrapper").html(''); var html = ''; var images = data.comment.images; for (var i=0; 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: 2500, 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/