当我 hide/show 滑动 DOM 时，使用 .update() 和 .star Autoplay() 无法自动播放

Question

你做了什么

这是演示：demo

与 API 文档中一样，在 hide/show 滑动器 dom 之后，应该使用 swiper.update() 使其再次有用。但是当我初始化滑动器时，我设置了 autoplay: 1000，在我 hide/show 滑动器 dom 之后，我得到了之前的滑动器对象，然后：

swiper.update() swiper.startAutoplay()

除了autoplay.

，一切都会好的

Answer 1

当 .swiper-container 有 none class

时，你需要使用 swiper.stopAutoplay();

片段

var swiper = null

window.onload = function() {
  swiper = new Swiper('.swiper-container', {
    autoplay: 1000,
    loop: true,
    autoplayDisableOnInteraction: false,
    effect: 'fade',
    pagination: '.swiper-pagination',
    paginationType: 'bullets',
    paginationClickable: true,
    paginationElement: 'span',
  })
}

$('div.btn').on('click', function(e) {
  $('.swiper-container').toggleClass('none') 
  if (!$('.swiper-container').hasClass('none')) {
    if (!swiper) return
    swiper.update(true)
    swiper.startAutoplay()
  } else {     
    swiper.stopAutoplay();
  }
})

.swiper-container {
  width: 600px;
  height: 300px;
}

.swiper-wrapper {
  overflow: hidden;
}

.swiper-slide {
  width: 600px;
  height: 300px;
  float: left;
}

.btn {
  background-color: #ccc;
}

.none {
  display: none;
}

<!DOCTYPE html>
<html>
<head>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
</head>
<body>
  <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
  </div>
  <div class="btn">Button</div>
</body>
</html>

当我 hide/show 滑动 DOM 时，使用 .update() 和 .star Autoplay() 无法自动播放

When I hide/show the swiper DOM, use .update() & .startAutoplay() can't make it auto play

javascript

jquery

dom

swiper

你做了什么