Как отключить автоматическую прокрутку в Swiper при изменении таба?

Как можно настроить Swiper так, чтобы при переключении табов автоматическое проигрывание сбрасывалось и показывался первый слайд, сохраняя при этом работоспособность слайдера и табов?
  • 17 июня 2024 г. 6:41
Ответы на вопрос 2
Для отключения автоматической прокрутки в Swiper при изменении таба можно воспользоваться событием 'tabChange' и методом stopAutoplay().

Пример реализации:

```javascript
var swiper = new Swiper('.swiper-container', {
    // настройки swiper
    autoplay: {
        delay: 5000, // время автоматической прокрутки
    },
});

var tabsSwiper = new Swiper('.tabs-container', {
    // настройки табов
    on: {
        tabChange: function () {
            swiper.autoplay.stop();
            swiper.slideTo(0); // переключение на первый слайд
            swiper.autoplay.start();
        }
    }
});
```

В данном примере, при изменении таба срабатывает событие 'tabChange', где мы останавливаем автоматическую прокрутку слайдера swiper методом stopAutoplay(), переключаем на первый слайд с методом slideTo(0), а затем запускаем автоматическую прокрутку снова методом startAutoplay().

Таким образом, при переключении табов автоматическое проигрывание будет сбрасываться и показываться первый слайд, сохраняя работоспособность слайдера и табов.
Можно использовать метод slideTo , но он ломает autoplay , поэтому можно сделать следующее: 
отключить autoplay - скролл до 1-го слайда - включить autoplay


navList[i].addEventListener("click", (evt) => {
    let currentLink = tabContainer.querySelector(
      ".slidersTab__tab-label.current"
    );
    let currentTab = tabContainer.querySelector(
      ".slidersTab__slidersItem.current"
    );
    //добавить 4 строчки -- start 
    let currentSlider = tabList[i].querySelector('.slidersTab__slider-body').swiper;
    currentSlider.autoplay.stop();
    currentSlider.slideTo(0, 0, false);
    currentSlider.autoplay.start();
    //-- end
    currentLink.classList.remove("current");
    navList[i].classList.add("current");

    currentTab.classList.remove("current");
    tabList[i].classList.add("current");    
});


Похожие вопросы