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.

JSFiddle(code)

  <div id="swiper" class="swiper-container mySwiper">
    <div class="swiper-wrapper">
       <div class="swiper-slide">
            <img src="static\images\arlens.gif" alt="ar">
            <span class="subtitle">
                Hi, Reader Thanks for reading
            </span>
        </div>
    </div>
    <div class="swiper-button-next" id="swiper-button-next"></div>
    <div class="swiper-button-prev" id="swiper-button-prev"></div>
</div>
<div class="speed_btns" id="speed_btns">
    <button onclick="change_speed(7500)">1x</button>
    <button onclick="change_speed(5500)">2x</button>
    <button onclick="change_speed(2500)">3x</button>
</div>

JS

let speed = 2500
var swiper2 = new Swiper(".mySwiper", {
        centeredSlides: true,
        autoplay: {
            delay: speed,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },

    });
   
  function change_speed(speed){
          // WANT TO CHANGE 'delay' OF 'swiper2' TO 'speed'
  }

Hope, you will guide me...

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.

JSFiddle(code)

  <div id="swiper" class="swiper-container mySwiper">
    <div class="swiper-wrapper">
       <div class="swiper-slide">
            <img src="static\images\arlens.gif" alt="ar">
            <span class="subtitle">
                Hi, Reader Thanks for reading
            </span>
        </div>
    </div>
    <div class="swiper-button-next" id="swiper-button-next"></div>
    <div class="swiper-button-prev" id="swiper-button-prev"></div>
</div>
<div class="speed_btns" id="speed_btns">
    <button onclick="change_speed(7500)">1x</button>
    <button onclick="change_speed(5500)">2x</button>
    <button onclick="change_speed(2500)">3x</button>
</div>

JS

let speed = 2500
var swiper2 = new Swiper(".mySwiper", {
        centeredSlides: true,
        autoplay: {
            delay: speed,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },

    });
   
  function change_speed(speed){
          // WANT TO CHANGE 'delay' OF 'swiper2' TO 'speed'
  }

Hope, you will guide me...

• javascript
• html
• jquery
• swiper.js

• 1 Do u have any jsfiddle or anything like that? That would be better for other users to work on the issue? – SESN Commented Jul 4, 2021 at 3:56

1 Answer 1

One possible approach, following advice given in this issue:

function change_speed(speed){
  swiper2.params.autoplay.delay = speed;
}

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.