How to Make Autoplay of the Swiper Slider Start Only After the Slider Enters Viewport

$(document).ready(function() {  new Swiper('.swiper-container', {    speed: 400,    spaceBetween: 100,    autoplay: true,    disableOnInteraction: true,  });  var mySwiper = document.querySelector('.swiper-container').swiper
  $(".swiper-container").mouseenter(function() {    mySwiper.autoplay.stop();    console.log('slider stopped');  });
  $(".swiper-container").mouseleave(function() {    mySwiper.autoplay.start();    console.log('slider started again');  });});

.swiper-slide {  text-align: center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" rel="stylesheet" /><!-- Slider main container --><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 class="swiper-slide">Slide 4</div>  </div>  <!-- If we need pagination -->  <div class="swiper-pagination"></div>
  <!-- If we need navigation buttons -->  <div class="swiper-button-prev"></div>  <div class="swiper-button-next"></div>
  <!-- If we need scrollbar -->  <div class="swiper-scrollbar"></div></div>

Swiper slider active class on slides in viewport and current class on one only

Update a swiper to the last version and add this parameter

watchSlidesVisibility: true

After that, you can control the animation with swiper-slide-visible CSS class.

Hope it helps you.

How can I align the slides to the swiper slider?

Swiper seems to work by creating duplicate slides if needed (so as to have some 'spares' for showing if it 'runs out' when cycling round.

You have 7 slides and want 5 showing at once so I feel it ought to have enough without creating any spares - ie there is always an extra 2 slides waiting in the wings to put into view. However, there must be something in the Swiper arithmetic which makes this not work and it 'runs out' in the case you have highlighted - e.g. when slide 1 is the main slide.

If you add

loopAdditionalSlides: 10,//(10 is a generous guess, it'll be worth trying lower number)

to options then with

loop: true, //as you have now

and take out the breakpoints option (the documentation at https://swiperjs.com/api/ says breakpoints don't work with loop) then the right number of slides show on the screen as it loops round automatically or with user clicking.

So, this solves the immediate question.

However, I noticed that the slider doesn't seem very responsive - as the viewport is narrowed the slides' widths don't narrow and the slidesPerView parameter appears to have no effect. I guess the hard coded container width at 1200px coupled with the slidesPerView: 1.6848 accounts for that - Swiper assuming it has 1200px to play with regardless of the actual width of the viewport. Is there a way of making Swiper shrink the width of slides proportional to the viewport width so that the same sort of view (5 slides, 4 being partially hidden) is seen on all devices/window widths?

As you had a breakpoint at 1023px I imagine you wanted to show 5 whole slides if the viewport is wider than that. It appears this is not possible given it says breakpoint doesn't work with loop. That is strange as looping and how many slides there are fully viewable on the screen would not seem to have anything to do with each other. May be worth raising on github if it is important for your application?

---

Related Topics