How to reassign slider settings after button click is triggered?

Question

Layout

Slider on Swiper.js
The idea is that there is a start / stop button for the slider, when I click on stop, a specific slide stops for me, and when I click on start, when it starts to run, it waits 4500 seconds to flip the next slide, and not immediately as soon as i pressed start, it flipped, it’s clear that these 4500 are the delay previously configured in the slider settings, how to fix it, I think just reassign delay there to 300 and then reassign it to 4500 in if again or do you have any other ideas? the question is how do I contact delay and specify a specific number?

$(function(){
  var sliderBannerInfo = new Swiper('.js-swiper-banner', {
    slidesPerView: 1,
    speed: 600,
    loop: true,
    autoplay: {
      delay: 4500,
    },
    loopFillGroupWithBlank: true,
    navigation: {
      prevEl: ".swiper-button-prev.info__swiper-button-prev",
      nextEl: ".swiper-button-next.info__swiper-button-next",
    },
    pagination: {
      el: '.info__pagination-slider.swiper-pagination',
      clickable: true
    },
  });


  let stopSliderBtn = document.querySelector('.js-start-stop-slider')
  
  $(stopSliderBtn).on('click', startStopSlider);

  let flag = 1
  function startStopSlider(){
    if(flag == 1) {
      flag = 2
      sliderBannerInfo.autoplay.stop();
      $(stopSliderBtn).addClass('active-pause-slider');
      
    }
    else {
      flag = 1
      sliderBannerInfo.autoplay.start();
      $(stopSliderBtn).removeClass('active-pause-slider');

    }
  }
})

Answer 1

the method destroy()changes the whole situation
https://askto-pro.translate.goog/question/how-to-u...

else {
      flag = 1
      sliderBannerInfo.autoplay.start();
      $(stopSliderBtn).removeClass('active-pause-slider');


      sliderBannerInfo.destroy()
      sliderBannerInfo = new Swiper('.js-swiper-banner', {
        autoplay: {
          delay: 500,
        }, 
      });
    }