您现在的位置是:网站首页>HTMLHTML

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

左鹏10-24 17:16:36HTML4,000人已围观

简介swiper3多个进行display:none切换时,会造成切换后无法自动播放和位移的情况用一下方法就可解决 1、初始化添加observer: true,observerParents: true参数,解决位移或错位的问题 var Swiper = new Swiper(".index", { loop: true, /* 启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。 默认fa

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

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

var Swiper = new Swiper(".index", {
  loop: true,
  /* 启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。
默认false,不开启,可以使用update()方法更新 */
  observer:true,
  /* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时,例如window.resize,Swiper更新。 */
  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();
  }
});

 

文章评论

    请先说点什么
    热门评论
    0人参与,0条评论
    正在载入评论列表...

    站点信息

    • 建站时间:2018-09-18
    • 网站程序:Spring Boot
    • 主题模板:《今夕何夕》
    • 文章统计:99条
    • 微信公众号:扫描二维码,关注我们
    登陆您的账户