Delay initial running/starting of Swiper.js autoplay

Issue

I have a Swiper.js carousel that autoplays. I also fade in my page using DOMContentLoaded. This means that the first slide has changed or is in the middle of changing when the page comes into view. So it's in view a much shorter amount of time compared to the others.

Is it possible to delay the initial running of the autoplay carousel? I know you can add a delay to individual slides - but if I do that to counter it, it means 2nd time around the first slide lags/is in view longer than the rest.

JavaScript code:

window.addEventListener('DOMContentLoaded', function() {
  document.body.className = 'visible';
});

var caption = document.querySelector('.swiper-caption span');

new Swiper('.swiper', {
    // Disable preloading of all images
    preloadImages: true,
    // Enable lazy loading
    lazy: false,
    effect: 'fade',
    fadeEffect: {
        crossFade: true
    },
    loop: true,
    autoplay: {
        delay: 1200,
        disableOnInteraction: false,
        pauseOnMouseEnter: true
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'fraction'
    },
    on: {
        init: function() {
            updateCaptionText(this);
        },
        activeIndexChange: function() {
            updateCaptionText(this);
        }
    }
});

function updateCaptionText(slider) {
    caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}

CSS code:

body.hidden {
    opacity: 0;
}

body.visible {
    opacity: 1;
    transition: opacity .48s .24s ease-out;
}

Solution

Call swiper.autoplay.stop() just after setting it up, and call swiper.autoplay.start() inside DOMContentLoaded event handler. Like so:

const swiper = new Swiper(".swiper", {
  // Disable preloading of all images
  preloadImages: true,
  // Enable lazy loading
  lazy: false,
  effect: "fade",
  fadeEffect: {
    crossFade: true,
  },
  loop: true,
  autoplay: {
    delay: 1200,
    disableOnInteraction: false,
    pauseOnMouseEnter: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
  },
  on: {
    init: function () {
      updateCaptionText(this);
    },
    activeIndexChange: function () {
      updateCaptionText(this);
    },
  },
});
swiper.autoplay.stop();

window.addEventListener("DOMContentLoaded", () => {
  document.body.className = "visible";
  swiper.autoplay.start();
});

If you wanna delay the inital start even further, to match it with your CSS animation duration, you can use a setTimout, like this:

window.addEventListener("DOMContentLoaded", () => {
  document.body.className = "visible";
  setTimeout(() => swiper.autoplay.start(), 1000); // 1000 means 1s, it's in ms here.
});

Live example here at this CodePen I forked. References of used methods are here on Swiper.js's official doc.

Answered By - yousoumar