Как заставить работать несколько слайдеров swiper в мобильно версии?

Question

[aex-svs]

Добрый день!
Есть определенная сложность в реализации 3 слайдеров в табах. Контент подгружается динамически в ПК версии все работает , но если переключиться в мобильный вариант(эмуляция браузера, либо зайти с телефона, то первый слайдер работает а в остальных слайды не листаются, с чем это может быть связано?) Скриншот приложил( использовал webpack в сборке проекта). на локалке все работает. (в начале использовал 7 версию свайпер, потом обновил до 8.4.7 ошибка не исчезла)
скриншон ошибки в консоле

Разметка такая

<div class="tabs-portfolio__content tab_content active" tab-content="1">
    <!-- Slider main wrapper -->
    <div class="swiper-container-wrapper">
      <!-- Slider main container -->
      <div class="swiper-container gallery-top">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper" >
          <!-- Slides -->          
          <div class="swiper-slide swiper-slide" >
            <a href="№" class="tabs-portfolio__primary-link">
              <img src="№" alt="" class="tabs-portfolio__primary-img">              
            </a>
          </div>
          
         <div class="swiper-slide swiper-slide" >
            <a href="№" class="tabs-portfolio__primary-link">
              <img src="№" alt="" class="tabs-portfolio__primary-img">              
            </a>
          </div>
          <div class="swiper-slide swiper-slide" >
            <a href="№" class="tabs-portfolio__primary-link">
              <img src="№" alt="" class="tabs-portfolio__primary-img">              
            </a>
          </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
      <!-- Slider thumbnail container -->
      <div class="swiper-container gallery-thumbs ">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide">
            <img src="#" alt="" class="tabs-portfolio__thumb-img">
          </div>
           <div class="swiper-slide ">
            <img src="#" alt="" class="tabs-portfolio__thumb-img">
          </div>
           <div class="swiper-slide">
            <img src="#" alt="" class="tabs-portfolio__thumb-img">
          </div>

        </div>
      </div>
    </div>

  </div>

<div class="tabs-portfolio__content tab_content " tab-content="2">....</div>
<div class="tabs-portfolio__content tab_content " tab-content="3">....</div>

const swiperGal = document.querySelectorAll('.tab_content');
swiperGal.forEach(n => {
  const galleryThumbs = new Swiper(n.querySelector('.gallery-thumbs'), {
    centeredSlides: true,
    centeredSlidesBounds: true,
    direction: "vertical",
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: false,
    observer: true,
    observerParents: true,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
    watchOverflow: true,
    breakpoints: {
      320: {
        spaceBetween: 10,
        direction: "horizontal",
        slidesPerView: 'auto'
      },
      800: {
        direction: "vertical",
        slidesPerView: 4
      }
    }
  });

  const galleryTop = new Swiper(n.querySelector('.gallery-top'), {
    direction: "horizontal",
    spaceBetween: 10,
    navigation: {
      nextEl: n.querySelector('.swiper-button-next'),
      prevEl: n.querySelector('.swiper-button-prev'),
    },

    thumbs: {
      swiper: galleryThumbs
    }
  });
});

Comments

[FrelFrloich]

Может нормальный html приведёте в пример а не после обработки скопированный через консоль?

[aex-svs]

FrelFrloich, А что именно Вам не понятно из структуры? 3 таба в каждом 1 слайдер который состоит из основного слайдера и слайдера превью thumbs. В ПК версии при переключении табов слайдеры работают, но в мобильной версии не работают - появляется ошибка в консоле.

[FrelFrloich]

aex-svs, Допустим это, эти три класа летят после инициализации свайпера swiper-slide-visible swiper-slide-active swiper-slide-thumb-active, если вы их проставили вручную, ну странно как минимум.

<div class="swiper-slide swiper-slide-visible swiper-slide-active swiper-slide-thumb-active">
            <img src="#" alt="" class="tabs-portfolio__thumb-img">
          </div>
           <div class="swiper-slide swiper-slide-visible swiper-slide-active swiper-slide-thumb-active">
            <img src="#" alt="" class="tabs-portfolio__thumb-img">
          </div>
           <div class="swiper-slide swiper-slide-visible swiper-slide-active swiper-slide-thumb-active">
            <img src="#" alt="" class="tabs-portfolio__thumb-img">
          </div>

[FrelFrloich]

aex-svs, Да и извините конечно, в мобильной не работает, в пк работает, ошибка в консоле, люди же не телепаты, код в песочницу или пример на сайте. иначе как? Вы в двух других что понаписали и тд, только человек с большой альтруистической ноткой в душе будет до чего то докапываться у вас. Помогите вам помочь в общем.

[aex-svs]

FrelFrloich, да, моя вина, подправил разметку. Ок, сейчас залью в кодпен. Также обратил внимание, что "ломается слайдер именно если меньше 800 ширина экрана. если просматривать на планшете 1024 , то все от, а если на 768 и менее, то "ломается" - ошибка

[aex-svs]

FrelFrloich, https://codepen.io/aex-svs/pen/PoybeBQ но слайдер работает

[FrelFrloich]

aex-svs, Поставил у себя, работает, значит ваш код провоцирует ошибку,

версия свайпера аналогичная, отрубите все слайдера кроме этого.

[aex-svs]

FrelFrloich, нифига не помогло, не понимаю с чем это связано почему на разрешениях менее 800 такая ситуация, вроде в настройках слайдерах все правильно указал.
Не понимаю с чем связана ошибка caught TypeError: Cannot read properties of undefined (reading 'swiperSlideSize')

[aex-svs]

Ответ найден в моем случае необходимо убрать свойство (centeredSlides: true).
Решение нашел здесь https://github.com/nolimits4web/swiper/issues/6377