如何使用swiper写轮播

Posted 心肺

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用swiper写轮播相关的知识,希望对你有一定的参考价值。

因为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写轮播的主要内容,如果未能解决你的问题,请参考以下文章

使用vue实现轮播图

手机的轮播图可以用jquery来做吗

原生Js写轮播图代码

使用swiper来实现轮播图

轮播插件vue-awesome-swiper的基本使用

如何自定义微信小程序swiper轮播图面板指示点的样式