swiper移动端下不能正常轮播的解决方案-----此坑没躺过估计很难找到正确姿势
2024-10-21 07:29:12
<script>
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical', //horizontal横向
loop: true,
pagination: '.swiper-pagination', // 如果需要分页器
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
scrollbar: '.swiper-scrollbar',// 如果需要滚动条
//核心部分
autoplayDisableOnInteraction : false, //滑动之后, 定时器也不会被清除
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: false, //修改swiper的父元素时,自动初始化swiper
onSlideChangeEnd: function(swiper) {
swiper.update();
swiper.startAutoplay();
swiper.reLoop();
}
})
</script>
mySwiper.reLoop(); 重新对需要循环的slide个数进行计算,当你改变了slidesPerView参数时需要用到,需要自动轮播的时候必须要加上;
swiper.update(); 更新Swiper,这个方法包含了updateContainerSize,updateSlidesSize,updateProgress,updatePagination,updateClasses方法。也就是数据改变是重新初始化一次swiper;
mySwiper.startAutoplay(); 重新开始自动切换;
最新文章
- canvas钟表
- Get,Post请求中文乱码问题有效解决方法
- xcode的调试技巧
- Linux命令(20)查看当前网速
- Ext.Net学习笔记15:Ext.Net GridPanel 汇总(Summary)用法
- 转载:js和jquery获取父级元素、子级元素、兄弟元素的方法
- 高焕堂《android从程序员到架构师之路》 YY讲坛直面大师学习架构设计
- M、V、C
- springMVC+Hibernate配置
- JavaScript设计模式_10_职责链模式
- c#基础知识索引器
- c/c++ 重载运算符 ==和!=的重载
- 30. pt-upgrade
- 初学Python——函数
- Selecting Courses POJ - 2239(我是沙雕吧 按时间点建边 || 匹配水题)
- framework4.0 IIS7下urlrewriter设置问题
- 牛客网NOIP赛前集训营-普及组(第一场)
- 51 nod 1243 排船的问题
- 每日英语:Tech Firms Flock to Vietnam
- C#的Xamarin开发小米盒子应用并以WCF实现微信通知