码迷,mamicode.com
首页 > 其他好文 > 详细

如何使用swiper写轮播

时间:2017-06-27 19:56:09      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:上下   new   cti   调整   asc   开始   个人总结   img   函数   

因为banner图是动态创建的,在插件开始初始化时,文档流中没用图片,所以没有创建相应宽度,通过调整js加载顺序,问题还是没有解决。

最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的,添加observer:true后问题解决!

 
var mySwiper = new Swiper (‘.swiper-container‘, {
        pagination: ‘.swiper-pagination‘,
        autoplay: 5000,
        loop: true,
        observer:true,//修改swiper自己或子元素时,自动初始化swiper
        observeParents:true,//修改swiper的父元素时,自动初始化swiper
 }) 
 

Swiper拥有丰富的API接口。(不过关于中文文档不多,没找着。)能够让开发者生成个人独有的分页器(pagination),上下滑块的按钮

以及4个回调函数:1.onTouchStart

          2.onTouchMove

          3.onTouchEnd

          4.onSlideSwitch。 

 

以上内容是我个人总结,希望对各位有所帮助!

 

如何使用swiper写轮播

标签:上下   new   cti   调整   asc   开始   个人总结   img   函数   

原文地址:http://www.cnblogs.com/zy17600095897/p/7086527.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
分享档案
周排行
mamicode.com排行更多图片
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!