I am using swiper.js for making a slideshow of images and videos. Here i want to change delay when user click on a button. But i don’t know how to change delay in swiper or any other method to do it??
I have read documentation of swiper.js but there is no function to change delay after creating swiper object.
JavaScript
x
18
18
1
<div id="swiper" class="swiper-container mySwiper">
2
<div class="swiper-wrapper">
3
<div class="swiper-slide">
4
<img src="staticimagesarlens.gif" alt="ar">
5
<span class="subtitle">
6
Hi, Reader Thanks for reading
7
</span>
8
</div>
9
</div>
10
<div class="swiper-button-next" id="swiper-button-next"></div>
11
<div class="swiper-button-prev" id="swiper-button-prev"></div>
12
</div>
13
<div class="speed_btns" id="speed_btns">
14
<button onclick="change_speed(7500)">1x</button>
15
<button onclick="change_speed(5500)">2x</button>
16
<button onclick="change_speed(2500)">3x</button>
17
</div>
18
JS
JavaScript
1
18
18
1
let speed = 2500
2
var swiper2 = new Swiper(".mySwiper", {
3
centeredSlides: true,
4
autoplay: {
5
delay: speed,
6
disableOnInteraction: false,
7
},
8
navigation: {
9
nextEl: ".swiper-button-next",
10
prevEl: ".swiper-button-prev",
11
},
12
13
});
14
15
function change_speed(speed){
16
// WANT TO CHANGE 'delay' OF 'swiper2' TO 'speed'
17
}
18
Hope, you will guide me…
Advertisement
Answer
One possible approach, following advice given in this issue:
JavaScript
1
4
1
function change_speed(speed){
2
swiper2.params.autoplay.delay = speed;
3
}
4
As you store the instance of Swiper in the variable, you can use it to modify all its settings directly. The one you need – delay – is placed in autoplay
section, according to docs.