CODEWITHSUNDEEP
javascriptjquerydomswiper.js
tomision
tomision

Reputation: 994

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

What you did

Here is the demo: demo

As in API docs, after hide/show the swiper dom, should use swiper.update() to make it useful again. But when I init the swiper, I set autoplay: 1000, after I hide/show the the swiper dom, I get the before swiper object, then:

swiper.update() swiper.startAutoplay()

Everything will be ok except autoplay.

Upvotes: 0

Views: 7333

Answers (1)

selvarajmas
selvarajmas

Reputation: 1643

You need to use swiper.stopAutoplay(); when .swiper-container have none class

Snippet

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>

Upvotes: 3

Related Questions