取消隐藏容器后如何让 Swiper 自动播放？ (idangero.us/swiper)

Question

主要问题

我正在尝试在 div 中使用 Swiper，它的可见性已切换。但是，在隐藏和显示 div 之后，Swiper 不会自动播放 - 即使在触发 mySwiper.Update()、mySwiper.autoplay.start() 之后，observer 和 observeParents 选项设置为 true。

备选方案

在切换可见性功能中使用新的 Swiper 确实可以使其自动播放，但会导致一系列新问题。拖动不正常，自动播放时不时跳转。

代码

我创建了两个代码笔来演示：

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
</head>

<style>
.hidden {
  display: none;
}
.nav, .swiper-container {
  text-align: center;
  margin: 10px;
}
</style>

<body>
<div class="nav">
  <a href="javascript:void(0)" onclick="toggleHidden();">Toggle Hidden</a>&nbsp;&nbsp;&nbsp;
  <a href="javascript:void(0)" onclick="startFunction();">Start Autoplay</a>
</div>

<!-- Swiper parent container -->
<div class="swiper-parent active">
    <!-- Slider main container -->
    <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">
                <img src='https://cdn.pixabay.com/photo/2019/08/19/07/45/pets-4415649_960_720.jpg' class="slide-image"/>
            </div>
            <div class="swiper-slide">
                <img src='https://cdn.pixabay.com/photo/2019/07/02/08/10/sunny-4311828_960_720.jpg' class="slide-image"/>
            </div>
            <div class="swiper-slide">
                <img src='https://cdn.pixabay.com/photo/2019/08/25/16/57/purple-4429887_960_720.jpg' class="slide-image"/>
            </div>
            <div class="swiper-slide">
                <img src='https://cdn.pixabay.com/photo/2019/02/15/11/04/book-3998252_960_720.jpg' class="slide-image"/>
            </div>
        </div>
    </div>
</div>

<script>
//Swiper Initialization
new Swiper('.swiper-container', {
    // Optional parameters
    observer: true,
    observeParents: true,
    loop: true,
    loopedSlides: 4,
    slidesPerView: 1,
    speed: 1800,
    autoplay: {
      delay: 100,
      disableOnInteraction: true,
    },
});

var mySwiper = document.querySelector('.swiper-container').swiper;

function startFunction(){
    mySwiper.autoplay.start();
};

function toggleHidden(){
  if ($('.swiper-parent').hasClass('active')){
    $('.swiper-parent').removeClass('active');
    $('.swiper-parent').addClass('hidden');
  } else {
    $('.swiper-parent').removeClass('hidden');
    $('.swiper-parent').addClass('active');
    mySwiper.update();
    mySwiper.autoplay.start();
  };
};
</script>
</body>
</html>

替代切换功能：

function toggleHidden(){
  if ($('.swiper-parent').hasClass('active')){
    $('.swiper-parent').removeClass('active');
    $('.swiper-parent').addClass('hidden');
    mySwiper.destroy();
  } else {
    $('.swiper-parent').removeClass('hidden');
    $('.swiper-parent').addClass('active');
    new Swiper('.swiper-container', {
        observer: true,
        observeParents: true,
        loop: true,
        loopedSlides: 4,
        slidesPerView: 1,
        speed: 1800,
        autoplay: {
          delay: 100,
          disableOnInteraction: true,
        },
    });
    var mySwiper = document.querySelector('.swiper-container').swiper;
  };
};

Answer 1

我找到了解决方案，不过，我没有经验，所以我认为这不是完成此任务的最佳或最干净的方法。

这是codepen solution

我用这一行$("#swiper-parent-id").load(location.href+" #swiper-parent-id>*","");重新加载div内容，导致隐藏div时Swiper实例被销毁。

然后在显示 div 时，我创建了一个新的 Swiper 实例。

这是我打算用替代解决方案做的事情，但由于某种原因，它奏效了，而 mySwiper.destroy(); 没有奏效。

编辑： 自从我最初发布以来，我得到了 mySwiper.destroy();正常工作。如果其他人遇到这个问题，那是因为我初始化刷卡器的方式。最好在主体代码末尾的 document.ready 函数中执行此操作。

取消隐藏容器后如何让 Swiper 自动播放？ (idangero.us/swiper)

How do I make Swiper autoplay after un-hiding container? (idangero.us/swiper)

javascript

jquery

swiper

主要问题

备选方案

代码