0

Столкнулся вот с какой проблемой. На странице реализованы табы. В каждой вкладке присутствует слайдер (Swiper JS). Отображается всё как надо. Но работает слайдер только в первой вкладке. Во всех остальных все элементы неактивны.

observer: true, observeParents: true и observeSlideChildren: true в параметрах слайдера не помогают.

Подскажите, пожалуйста, как я могу решить эту проблему? Ниже приведен пример одного из табов и js код для слайдера и слайдера-превью. По структуре они все одинаковые за исключением количества слайдов, их содержания и текста.

const swiper = document.querySelector('.swiper');
const mini_swiper = document.querySelector('.mini-swiper');

let myMiniSwiper = new Swiper(mini_swiper, {
  slidesPerView: 10,
  spaceBetween: 10,
  freeMode: true,
  direction: 'horizontal',
});

let myMySwiper = new Swiper(swiper, {
  direction: 'horizontal',
  observer: true,
  loop: false,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  thumbs: {
    swiper: myMiniSwiper,
  },
});
<script src="https://unpkg.com/[email protected]/swiper.esm.js"></script>
<div class="tabs__block" id="tab_2">
  <div class="tabs__container">
    <div class="tabs__swiper">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/1.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/2.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/3.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/4.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/5.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/6.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/7.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/8.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/9.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/10.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/11.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/12.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/13.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/14.jpg" alt=""></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      <div class="swiper mini-swiper">
        <div class="swiper-wrapper mini-swiper-wrapper">
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/1.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/2.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/3.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/4.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/5.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/6.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/7.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/8.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/9.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/10.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/11.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/12.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/13.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/14.jpg" alt=""></div>
        </div>
      </div>
    </div>
    <div class="tabs__description">
      <h3 class="tabs__heading">Офисы</h3>
      <p class="section-description">В офисах система видеонаблюдения нужна для контроля пространства от несанкционированного выноса оргтехники и контроля рабочего времени сотрудника.</p>
      <p class="section-description">Зачастую, камеры устанавливаются непосредственного над каждым рабочим местом, чтоб был виден экран сотрудника, а также обзорная камера в каждое помещение. Из-за небольших расстояний чаще всего используются 2-х мегапиксельные камеры с возможностью
        передачи картинки в Full HD. Удаленный доступ устанавливается руководителю на смартфон и компьютер. Глубина архива индивидуальна!</p>
      <p class="section-description">Воспользуйтесь нашим калькулятором для расчета стоимости работ и наш менеджер свяжется с Вами для уточнения всех деталей.</p>
      <button class="btn btn_calc" type="button">РАССЧИТАТЬ СТОИМОСТЬ</button>
    </div>
  </div>
</div>

2
  • Для каждой вкладки таба слайдер нужно инициализировать отдельно. Так же по дефолту их нужно отключить и включать только в активной вкладке.
    – De.Minov
    15 июн 2022 в 16:05
  • Правильно я понимаю, что необходимо писать скрипт для каждого слайдера в отдельности?
    – user504975
    16 июн 2022 в 12:15

1 ответ 1

0

Если я правильно понял, то основной элемент таба, в котором находятся Swiper, это элемент .tabs_block.
В таком случае, чтобы слайдер работал в каждом таком блоке, нужно пройтись по всем этим блокам через цикл и в каждом инициализировать Swiper.

[...document.querySelectorAll('.tabs__block')].map(tab => {
  const swiper = tab.querySelector('.swiper');
  const mini_swiper = tab.querySelector('.mini-swiper');
  
  if(swiper && mini_swiper) {
    const myMiniSwiper = new Swiper(mini_swiper, {
      slidesPerView: 10,
      spaceBetween: 10,
      freeMode: true,
      direction: 'horizontal',
    });

    const myMySwiper = new Swiper(swiper, {
      direction: 'horizontal',
      observer: true,
      loop: false,
      pagination: {
        el: swiper.querySelector('.swiper-pagination'),
      },
      navigation: {
        nextEl: swiper.querySelector('.swiper-button-next'),
        prevEl: swiper.querySelector('.swiper-button-prev'),
      },
      thumbs: {
        swiper: myMiniSwiper,
      },
    });
  }

});
.swiper img {
  display: block;
  width: 100%;
  height: 200px;
}

.mini-swiper {
  height: 50px;
}
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>

<div class="tabs__block" id="tab_2">
  <div class="tabs__container">
    <div class="tabs__swiper">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/1.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/2.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/3.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/4.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/5.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/6.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/7.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/8.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/9.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/10.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/11.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/12.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/13.jpg" alt=""></div>
          <div class="swiper-slide"><img class="tabs__img" src="Photos/Office/14.jpg" alt=""></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      <div class="swiper mini-swiper">
        <div class="swiper-wrapper mini-swiper-wrapper">
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/1.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/2.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/3.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/4.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/5.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/6.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/7.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/8.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/9.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/10.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/11.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/12.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/13.jpg" alt=""></div>
          <div class="swiper-slide mini-swiper__slide"><img class="tabs__img mini-tabs__img" src="Photos/Office/14.jpg" alt=""></div>
        </div>
      </div>
    </div>
    <div class="tabs__description">
      <h3 class="tabs__heading">Офисы</h3>
      <p class="section-description">В офисах система видеонаблюдения нужна для контроля пространства от несанкционированного выноса оргтехники и контроля рабочего времени сотрудника.</p>
      <p class="section-description">Зачастую, камеры устанавливаются непосредственного над каждым рабочим местом, чтоб был виден экран сотрудника, а также обзорная камера в каждое помещение. Из-за небольших расстояний чаще всего используются 2-х мегапиксельные камеры с возможностью
        передачи картинки в Full HD. Удаленный доступ устанавливается руководителю на смартфон и компьютер. Глубина архива индивидуальна!</p>
      <p class="section-description">Воспользуйтесь нашим калькулятором для расчета стоимости работ и наш менеджер свяжется с Вами для уточнения всех деталей.</p>
      <button class="btn btn_calc" type="button">РАССЧИТАТЬ СТОИМОСТЬ</button>
    </div>
  </div>
</div>

Так же совет, каждый слайдер после инициализации при помощи метода .disable() и включать только у активного таба, при помощи .enable()

2
  • Благодарю! Попробую так
    – user504975
    20 июн 2022 в 7:00
  • @ElJeko, если мой ответ вам помог, то отметьте его галочкой (слева, под рейтингом ответа)
    – De.Minov
    20 июн 2022 в 7:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.