UNPKG

swiper-slidedelay

Version:
56 lines (47 loc) 1.48 kB
# Swiper-SlideDelay Small plugin for [Swiper](https://github.com/nolimits4web/swiper). Adds dynamic slide transition delays. ## Demo :point_right: 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: ```html <script src="/path/to/swiper-slidedelay.min.js"></script> ``` or use CDN: ```html <script src="https://cdn.jsdelivr.net/gh/fibit/swiper-slidedelay@main/swiper-slidedelay.min.js"></script> ``` #### 3. Add Swiper HTML Layout: ```html <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: ```js 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