Menu
I would like to know whether there is an option to set individual slide duration/delay in Swiper JS out of the box. I searched in the docs, github issues but couldn't find anything related.
If not available out of the box, can anyone show how to achieve this by hacking the core or custom code.
thanks.
891
data-swiper-autoplay attribute:
https://swiperjs.com/swiper-api#param-autoplay
Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide:
<!-- hold this slide for 2 seconds -->
<div class="swiper-slide" data-swiper-autoplay="2000">
Example:
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/swiper-bundle.min.css">
</head>
<body>
<!-- Swiper -->
<h1>Swiper 7 data-swiper-autoplay</h1>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" data-swiper-autoplay="3000">3 seconds</div>
<div class="swiper-slide" data-swiper-autoplay="4000">4 seconds</div>
<div class="swiper-slide" data-swiper-autoplay="5000">5 seconds</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/[email protected]/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper', {
initialSlide: 1,
slidesPerView: 1,
spaceBetween: 20,
autoplay: {
delay: 2000,
},
centeredSlides: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
