当前位置: 首页 > Web前端 > CSS

解决swiper.js中无缝轮播问题

时间:2023-03-31 00:09:39 CSS

根据公司需要,需要让轮播播放无间隙,类似这样的效果:http://www.16sucai.com/upload....因为懒,所以自己写的swiper.js插件。swiper.js自动旋转时,会自动停顿。各种研究都没有合适的方法,只能慢慢摸索。通过查看代码,发现.swiper-wrapper类中有一个属性:transition-timing-function:ease;,修改swiper.js中css的源码,将该属性的值改为linear实现无缝轮换。就这么简单。transition-timing-function:linearSwipercarousel有它的优点:    1。Swiper是一款纯javascript编写的滑动效果插件,面向手机、平板等移动终端。2.Swiper可以实现触屏对焦图、触屏Tab切换、触屏多图切换等常用效果。3.Swiper是开源、免费、稳定、易于使用且功能强大的。是建设移动端网站的重要选择!    同时也有不足之处:(使用Swiper轮播插件ajax请求加载图片时无法滑动的问题)因为banner图片是动态创建的,插件开始初始化的时候,文档流中没有图片,所以没有创建对应的宽度,通过调整js加载顺序,问题依旧没有解决。最后发现swiper插件api有属性可以根据内容改变,插件可以自动初始化。添加observer:true后,问题解决!varmySwiper=newSwiper('.swiper-container',{pagination:'.swiper-pagination',autoplay:5000,loop:true,observer:true,//修改swiper本身或子元素时,自动初始化swiperobserveParents:true,//当修改swiper的父元素时,自动初始化swiper})S??wiper有丰富的API接口。(不过中文文档不多,没找到。)允许开发者生成自己独特的分页、上下滑块的按钮以及4个回调函数:1.onTouchStart        2.onTouchMove        3.onTouchEnd        4.onSlideSwitch。