Изменение delay слайдера в процессе работы

19 апреля 2021, 14:00

Есть два слайдера на странице. Мне нужно сделать, чтобы разница между их переключением была в 5 секунд, поочередно.
Первый слайд переключается, второй - через 5 секунд, первый - через 5 секунд и тд. Просто autoplay не получается, они начинают пересекаться. Пробовал через slideChange - не получилось. Решение может быть в том, что первый слайдер должен иметь при инициализации delay в 5 секунд, а при последующих переключениях 10 секунд. Тогда все сработает. Как можно изменить delay при следующем переключении? Может есть уже готовые слайдеры с таким функционалом. Не обязательно Swiper.

var mySwiper = new Swiper ('.one', {
    loop: true,
    slidesPerView: 1,
     autoplay: {
         delay: 10000,
     },
})

var mySwiper2 = new Swiper ('.two', {
    loop: true,
    slidesPerView: 1,
     autoplay: {
         delay: 5000,
     },
})

Answer 1

Сделайте вот так, и получите задержку для первого слайдера в 5 секунд:

var mySwiper = new Swiper('.one', { 
  loop: true, 
  slidesPerView: 1, 
  autoplay: { 
    delay: 5000, 
  }, 
}); 
mySwiper.autoplay.stop(); 
mySwiper.on('slideChange', function () { 
  mySwiper.autoplay.stop(); 
  mySwiper2.autoplay.start(); 
}); 
 
var mySwiper2 = new Swiper('.two', { 
  loop: true, 
  slidesPerView: 1, 
  autoplay: { 
    delay: 5000, 
  }, 
}) 
mySwiper2.on('slideChange', function () { 
  mySwiper2.autoplay.stop(); 
  mySwiper.autoplay.start(); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" /> 
 
<!-- Slider main container --> 
<div class="swiper-container one"> 
  <!-- Additional required wrapper --> 
  <div class="swiper-wrapper"> 
    <!-- Slides --> 
    <div class="swiper-slide">Slide 1</div> 
    <div class="swiper-slide">Slide 2</div> 
    <div class="swiper-slide">Slide 3</div> 
  </div> 
</div> 
 
<!-- Slider main container --> 
<div class="swiper-container two"> 
  <!-- Additional required wrapper --> 
  <div class="swiper-wrapper"> 
    <!-- Slides --> 
    <div class="swiper-slide">Slide 1</div> 
    <div class="swiper-slide">Slide 2</div> 
    <div class="swiper-slide">Slide 3</div> 
  </div> 
</div>