swiper隐藏后再显示不会触发自动播放,加loop导致播放不正常

当使用Swiper组件时,隐藏后的swiper-container重新显示不会自动播放,且设置loop模式可能导致播放异常。点击事件触发显示swiper-container时,需要解决自动播放问题和循环播放的同步问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

代码:点击huanj这个ul再显示swiper-container,默认swiper-container是隐藏的

..................................css...............................

.container{
    width:96%;
    margin:2% auto;
    position: relative;
display:none;

}

...................................页面.........................

  <ul class="huanj">

    <li><img src="/images/xueda/hj1.jpg"></li>
    <li><img src="/images/xueda/hj3.jpg"></li>
    <li><img src="/images/xueda/hj4.jpg"></li>
    <li><img src="/images/xueda/hj5.jpg"></li>
    <li><img src="/images/xueda/hj6.jpg"></li> 
  </ul>
<div class="container re1">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="/images/xueda/hj1.jpg"></div>
      <div class="swiper-slide"><img src="/images/xueda/hj3.jpg"></div>
      <div class="swiper-slide"><img src="/images/xueda/hj4.jpg"></div>
      <div class="swiper-slide"><img src="/images/xueda/hj5.jpg"></div>
      <div class="swiper-slide"><img src="/images/xueda/hj6.jpg"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

</div>

<script src="/js/swiper3.07.jquery.min.js" type="text/javascript"></script> 
    <script>
swiper1 = new Swiper('.swiper-container', {
    observer:true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents:true//修改swiper的父元素时,自动初始化swiper
});


    </script>

.....................................................js ...................................


 $(".huanj").click(function(){

 $(".container").show();
 $(".huanj").hide();
  var mySwiper = new Swiper('.swiper-container', {  


        autoplay: 2500,
        autoplayDisableOnInteraction: false,
        pagination: '.swiper-pagination',
        paginationClickable: true,
       onSlideChangeEnd: function(swiper){ 
            swiper.update(); //swiper更新
        }
    });

................................效果..................

http://xdjy.soujoin.com/xa/xueda/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值