Swiperjs. Сладйлеры в табах. Необходима инициализация

Question

В проекте есть табы. В каждом табе есть слайдер. Табы переключаются, слайдеры работают как надо. Но проблема в том, что при размере экрана начиная от планшета все слайдеры отображаются разом. observer: true и observeParents: true не помогает.

Читал некоторые вопросы здесь и везде пишут, что необходимо инициализировать слайдер соответствующему табу каждый раз при переключении.

Может кто-нибудь объяснить как это сделать?

<div class="project" id="store">
    <div class="projects__swiper">
        <div class="swiper swiper-init">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img class="project__photo" src="" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="project__photo" src="" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="project__photo" src="" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="project__photo" src="" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="project__photo" src="" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="project__photo" src="" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="project__photo" src="" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="project__photo" src="" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="project__photo" src="" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="project__photo" src="" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="project__photo" src="" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="project__photo" src="" alt="">
                </div>
                <div class="swiper-slide">
                    <img class="project__photo" src="" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev projects__swiper-prev"></div>
            <div class="swiper-button-next projects__swiper-next"></div>
        </div>
    </div>
    <div class="projects__descriptions">
        <h3 class="heading projects__heading">МАГАЗИНЫ</h3>
        <p class="text projects__text"></p>
        <p class="text projects__text"></p>
    </div>
</div>

const swiper = new Swiper('.swiper', {
    // Optional parameters
    direction: 'horizontal',
    loop: true,
    spaceBetween: 15,
    observer: true,
    observeParents: true,

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
    }
});

Answer 1

В коде у вас не указано init: false, следовательно слайдер инициализирован изначально, а значит при переключении таба вам нужно его обновить или инициализировать.

Выглядеть это будет примерно так:

{ // тело функции переключение таба
  const swipers = activeTab.querySelectorAll('.swiper');
  if(swipers.length > 0) {
    swipers.forEach(function(swiper) {
      if(swiper.params.init && swiper.params.init === false) {
        swiper.swiper.init();
      } else {
        swiper.swiper.update();
      }
    });
  }
}

БЛОГ НА HUSL

Swiperjs. Сладйлеры в табах. Необходима инициализация

Ответы (1 шт):