1

Подскажите почему при использовании табов бутстрап вместе со слайдером свайпер , слайдеры ведут себя странно. При переключении табов слайдер не управляется стрелочками + мышкой перелистывается с какими-то зависаниями. В чем проблема. Начинает работать корректно слайдер если изменить размер окна(например перейти на моб версию и обратно). Как это можно исправить.

вставляю в js код swiper2.update() при клике на табы. Срабатывает только после 2 переключения. Помогите разобраться.

var triggerTabList = [].slice.call(document.querySelectorAll('#product a'))
triggerTabList.forEach(function(triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function(event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

var swiper1 = new Swiper(".mySwiper", {
  navigation: {
    nextEl: ".next-1",
    prevEl: ".prev-1",
  },
});

var swiper2 = new Swiper(".mySwiper2", {
  navigation: {
    nextEl: ".next-2",
    prevEl: ".prev-2",
  },
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<div class="container-fluid">
  <ul class="nav nav-tabs" id="product">
    <li class="nav-item">
      <a class="nav-link active" href="#description">Описание</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#characteristics">Характеристики</a>
    </li>
  </ul>
  <div class="tab-content p-3">
    <div class="tab-pane fade show active" id="description">
      <h2 class="h4 mb-3">Описание товара</h2>
      <div class="swiper-container mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
        </div>
        <div class="swiper-button-next next-1"></div>
        <div class="swiper-button-prev prev-1"></div>
      </div>
    </div>
    <div class="tab-pane fade" id="characteristics">
      <h2 class="h4 mb-3">Характеристики товара</h2>
      <div class="swiper-container mySwiper2">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
        </div>
        <div class="swiper-button-next next-2"></div>
        <div class="swiper-button-prev prev-2"></div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

1 ответ 1

0

Попробуйте добавить в параметры слайдера:

observer: true,
observeParents: true

Ваш ответ

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

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