I'm using this code to initialize swiper slider.

var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 0,
    parallax: true,
    autoplay: 5000,
    speed: 800,
    autoplayDisableOnInteraction: false
}) 

Since the slider is positioned inside the fourth section of the page and is visible only after the page is scrolled down, I would like to make the autoplay start only after the slider enters the viewport. Is there a way to do this?

I'm using this code to initialize swiper slider.

var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 0,
    parallax: true,
    autoplay: 5000,
    speed: 800,
    autoplayDisableOnInteraction: false
}) 

Since the slider is positioned inside the fourth section of the page and is visible only after the page is scrolled down, I would like to make the autoplay start only after the slider enters the viewport. Is there a way to do this?

• javascript
• jquery
• swiper.js
• autoplay

5 Answers 5

var mySwiper = new Swiper('.swiper-container', {
   autoplay: {
    delay: 5000,
  },

});

Assuming you're trying play on 4th slides:

var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 0,
    parallax: true,
    autoplay: 5000,
    speed: 800,
    autoplayDisableOnInteraction: false,
    onSlideChangeStart: function(s){
      if (s.activeIndex === 3) {
          // do something here, 4th slide is active now and so on
          console.log('hi! Try to reach 4th slides');
          s.startAutoplay(); // calling autoplay on 4th slides.
      }
    }
}) 

You can use Intersection Observer API to make slider autoplay only after the slider enters viewport.

Here's an example:

const swiper = new Swiper('.swiper-container', {
// Optional parameters
  autoplay: {
    delay: 3000,
  },
});

const observer = new IntersectionObserver(entries => {
  const firstEntry = entries[0];
  if (firstEntry.isIntersecting) {
    swiper.autoplay.start();
  } else {
    swiper.autoplay.stop();
  }
});

const swiperContainer = document.querySelector('.swiper-container');
observer.observe(swiperContainer);

You could potentially use something like jquery appear - https://github.com/morr/jquery.appear

$('mySwiperContainer').on('appear', function(event, $all_appeared_elements) {
  // this element is now inside browser viewport
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 0,
    parallax: true,
    autoplay: 5000,
    speed: 800,
    autoplayDisableOnInteraction: false
  }) 
});

as i am using this swiper version 11.1.5 for automatic slide I used

var mySwiper = new Swiper('.swiper-container', {   autoplay: {    delay: 2000,  },});

or

<div class="swiper-slide" data-swiper-autoplay="2000">