Swiper-SlideDelay

Small plugin for Swiper. Adds dynamic slide transition delays.

Demo

👉 https://codesandbox.io/p/sandbox/swiper-slidedelay-zv6wjj

How use

1. Include Swiper

See https://swiperjs.com/get-started#installation

2. Include SlideDelay:

Pull-in a latest version with NPM:

npm i swiper-slidedelay

and provide <script> to the required:

<script src="/path/to/swiper-slidedelay.min.js"></script>

or use CDN:

<script src="https://cdn.jsdelivr.net/gh/fibit/swiper-slidedelay@main/swiper-slidedelay.min.js"></script>

3. Add Swiper HTML Layout:

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-swiper-slide-delay="1000">Slide 1 (1s)</div>
    <div class="swiper-slide">Slide 2 (default 3s)</div>
    <div class="swiper-slide" data-swiper-slide-delay="5000">Slide 3 (5s)</div>
    ...
  </div>
</div>

4. Initialize Swiper with SlideDelay:

const swiper = new Swiper('.mySwiper', {
  modules: [SlideDelayPlugin],
  autoplay: {
    delay: 3000, // default delay
  },
});

Key Features

• Each slide can have a custom delay using the data-swiper-slide-delay attribute
• Works with Swiper's autoplay functionality

Behavior Notes

• Ensure Swiper's autoplay is enabled for the plugin to work
• If no custom delay is specified for a slide, the default autoplay.delay value will be used