0

Есть два слайдера на странице. Мне нужно сделать, чтобы разница между их переключением была в 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,
     },
})

1 ответ 1

3

Сделайте вот так, и получите задержку для первого слайдера в 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>

6
  • спасибо! Делал на таймаутах, но неправильно)
    – Dmitry N
    23 июл 2019 в 7:19
  • upd А нет, все равно пересекаются
    – Dmitry N
    23 июл 2019 в 7:27
  • @DmitryN Добавила в свой ответ "Выполнить код" - нажмите его. Через 5 сек певый слайдер начинает "отставать" от второго на 5 секунд, и они далее не "пересекаются". Убедитесь, что вы используете ту же версию плагина. Если я не так поняла ваш вопрос, уточните его. У вас заработало? 23 июл 2019 в 9:27
  • @ElenaVasilenko при первой смене все хорошо, но при повторной сменяется первый слайд и за ним сразу второй. А разница между ними должна быть 5 секунд.
    – Dmitry N
    23 июл 2019 в 11:11
  • @DmitryN Изменено поведение: убран таймаут, добавлены обработчики slideChange. Такое поведение слайдеров должно быть? 23 июл 2019 в 17:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.