Swiper中文论坛

标题: 多个swiper间切换，隐藏后再显示不会触发自动播放 [打印本页]

作者: kongxiaonan 时间: 2016-5-17 10:33
标题: 多个swiper间切换，隐藏后再显示不会触发自动播放
多个swiper间切换，swiper-container隐藏后再显示不会触发自动播放，必须手势滑动一次，才能被触发自动播放，怎么解决
autoplay: 3000,
speed: 500,
loop: true,
observer:true,
observeParents:true,
autoplayDisableOnInteraction : false,

作者: 菜鸟来袭 时间: 2016-5-18 10:58
重置初始化，靠JS实现了，

作者: kongxiaonan 时间: 2016-5-19 09:36
observer:true,
observeParents:true,
的作用不是当swiper隐藏/显示，自动初始化swiper的作用吗？
js怎么实现？能讲讲原理吗？

作者: 菜鸟来袭 时间: 2016-5-19 11:31
不知道你那怎么写的，需要看代码才清楚。

作者: kongxiaonan 时间: 2016-5-19 13:56
能加qq聊一聊吗

作者: kongxiaonan 时间: 2016-5-19 13:59
<script type="text/javascript">
$(document).ready(function() {
var swiper = new Swiper('#swiper-container1', {
      pagination: '#swiper-container1 .swiper-pagination',
      paginationClickable: true,
autoplay: 1500,
loop: true,
autoplayDisableOnInteraction : false,
observer:true,
observeParents:true
});
var myswiper = new Swiper('#swiper-container2', {
      pagination: '#swiper-container2 .swiper-pagination',
      paginationClickable: true,
autoplay: 1500,
loop: true,
autoplayDisableOnInteraction : false,
observer:true,
observeParents:true
});
$('nav span').click(function(){
   var index = $(this).index();
   $('nav span').eq(index).addClass('cur_n').siblings().removeClass('cur_n');
   $('ul li').eq(index).show().siblings().hide();
   if($(this).index() == 0){
swiper.slideTo(1);
swiper.startAutoplay();
   }else{
myswiper.slideTo(1);
myswiper.startAutoplay();
   }
});
});
</script>

作者: kongxiaonan 时间: 2016-5-19 13:59
<body>
<nav>
<span class="cur_n">产品详情</span>
<span>公司介绍</span>
</nav>
<ul>
  <li>
    <h5>产品详情</h5>
<div class="swiper-container" id="swiper-container1">
      <div class="swiper-wrapper">
         <div class="swiper-slide"><img src="Swiper-3.3.1/demos/img/1.png"/></div>
         <div class="swiper-slide"><img src="Swiper-3.3.1/demos/img/2.png"/></div>
      </div>
      <div class="swiper-pagination"></div>
</div>
  </li>
  <li style="display:none;">
    <h5>公司介绍</h5>
<div class="swiper-container" id="swiper-container2">
      <div class="swiper-wrapper">
         <div class="swiper-slide"><img src="Swiper-3.3.1/demos/img/3.png"/></div>
         <div class="swiper-slide"><img src="Swiper-3.3.1/demos/img/4.png"/></div>
         <div class="swiper-slide"><img src="Swiper-3.3.1/demos/img/5.png"/></div>
      </div>
      <div class="swiper-pagination"></div>
</div>
  </li>
</ul>
</body>

作者: kongxiaonan 时间: 2016-5-19 14:01
代码如上就是切换的时候切换到第二个的时候第二个里面的swiper就不自动轮播了需要手动划一下才会开始自动播放

作者: 牛逼玮 时间: 2016-5-20 10:24
不是吧！不是吧！

作者: kongxiaonan 时间: 2016-5-23 16:02
各位大神没有遇到这种情况的吗

作者: Nola_jun 时间: 2016-6-6 16:37

kongxiaonan 发表于 2016-5-19 13:59
$(document).ready(function() {
var swiper = new Swiper('#swiper-container1', {
pagination: ...

我这个是后台循环出来的，只有一个swiper-container，做替换，问题是再次点击回之前的swiper，不自动滑动，变成需要先手动触发一下，才可以

作者: Nola_jun 时间: 2016-6-6 16:38

kongxiaonan 发表于 2016-5-19 14:01
代码如上就是切换的时候切换到第二个的时候第二个里面的swiper就不自动轮播了需要手动划一下才会开始 ...

是的，我的就是这个问题，怎么解决呢

作者: 忍V殇 时间: 2017-3-16 10:25
兄弟，你解决了吗？我现在遇到了，怎么破

作者: fxy 时间: 2017-9-22 23:35
我也遇到这个问题，怎么解决的

作者: Toby 时间: 2017-10-5 10:18
楼主的解决办法是什么？

作者: Toby 时间: 2017-10-5 10:25
之前解决了的兄弟能不能帮忙把这个问题破一下

作者: Toby 时间: 2017-10-5 11:04
多组swiper之间的切换，用显示隐藏不自动播放的问题确实很棘手，不过可以用控制高度的方法解决，把隐藏的swiper高度设为0，overflow：hidden。需要显示的swiper高度auto;用这种方法，每个swiper是同时运转的。只找到这个办法，希望能有更好的办法

作者: 团子先生 时间: 2017-11-13 16:10
在一个页面多个swiper切换，因为你只在页面加载的时候初始化了一次，所以切换的时候会停止轮播；解决方法：

切换的时候初始化

作者: 发飙的奶牛 时间: 2018-3-1 16:58
楼主有没有解决呢？同样的问题

作者: funkhh 时间: 2018-4-13 10:42

发飙的奶牛发表于 2018-3-1 16:58
楼主有没有解决呢？同样的问题

用swiper 销毁，mySwiper.destroy(false);切换回来后在初始化
this.mySwiper.destroy(false);
this.mySwiper=new Swiper(".content_header",{
autoplay:{disableOnInteraction:false},
speed:200,
loop:true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
pagination:{
el:'.swiper-pagination',
clickable:true
}
});

作者: funkhh 时间: 2018-4-13 10:44

发飙的奶牛发表于 2018-3-1 16:58
楼主有没有解决呢？同样的问题

调用swiper 销毁，mySwiper.destroy(false);切换回来后在初始化
this.mySwiper.destroy(false);
this.mySwiper=new Swiper(".swiper-container",{
autoplay:{disableOnInteraction:false},
speed:200,
loop:true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents:true,//修改swiper的父元素时，自动初始化swiper
pagination:{
      el:'.swiper-pagination',
      clickable:true
}
});

作者: 章大大 时间: 2018-11-12 16:29
知道怎么解决了吗

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)