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