分享好友 教程首页 教程搜索 频道列表

swiper3使用display:none切换后不自动播放等bug的解决方法

2020-07-20 10:188710
+关注28
核心提示:swiper3多个进行display:none切换时,会造成切换后无法自动播放和位移的情况用一下...

swiper3多个进行display:none切换时,会造成切换后无法自动播放和位移的情况用一下方法就可解决

1、初始化添加observer: true,observerParents: true参数,解决位移或错位的问题

var Swiper = new Swiper(".index", {
  loop: true,
  
  observer:true,
  
  observeParents:true,
  autoplay: 1000, //可选选项,自动滑动
  spaceBetween: 20,
  autoplayDisableOnInteraction: false, //注意此参数,默认为true
 
  // 如果需要分页器
  pagination: "",
  paginationClickable: true
});

2、在切换后初始化Swiper就解决无法自动播放的问题

$('#anniu').on('click',function () {
  for(var i in Swiper){
    Swiper[i].init();
    Swiper[i].stopAutoplay();
    Swiper[i].startAutoplay();
  }
});

本文标签: #swiper #导航 #切换 #tab #效果
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

swiper高度自适应

    最近在写项目中用到swiper做tab切换,因每个tab页的内容不一样,有的内容多,就会高一些,而有的内容少,会出现白屏,所以需要自适应高度,根绝官方API在swiper中添加 autoHeight: true ,但是并没有什么作用,第一

网络转载 CSS教程2023-03-28

用swiper做手机端滑动导航栏

    用代码测试

网络转载 JavaScript教程2022-05-25

swiper根据图片切换不同的背景色

    用代码测试

网络转载 JavaScript教程2022-05-25

swiper文字垂直滚动(公告栏)

    需用代码测试

小黑 JavaScript教程2022-03-26

swiper鼠标移入停止滚动 移出开始滚动

    效果用代码测试

网络转载 JavaScript教程2022-02-04

下一篇
我来说两句
抢沙发