Навигация табов в слайдере Swiper
Доброго времени суток.
Суть вопроса: пытаюсь сверстать блок, где есть слайдер с небольшими изображениями, которые должны являться навигацией табов, т.е. при нажатии на слайд должен открываться соответствующий таб.
В качестве слайдера использую Swiper.
Вот код, который использую для табов:
let tabs = document.querySelectorAll("._tabs");
for (let index = 0; index < tabs.length; index++) {
let tab = tabs[index];
let tabs_items = tab.querySelectorAll("._tabs-item");
let tabs_blocks = tab.querySelectorAll("._tabs-block");
for (let index = 0; index < tabs_items.length; index++) {
let tabs_item = tabs_items[index];
tabs_item.addEventListener("click", function (e) {
for (let index = 0; index < tabs_items.length; index++) {
let tabs_item = tabs_items[index];
tabs_item.classList.remove('_active');
tabs_blocks[index].classList.remove('_active');
}
tabs_item.classList.add('_active');
tabs_blocks[index].classList.add('_active');
e.preventDefault();
});
}
}
Примерная структура:
<div class="tabs _tabs">
<div class="tabs__body">
<div class="block _tabs-block">
<span class="text">Какой-то текст и тд.</span>
</div>
<div class="block _tabs-block">
<span class="text">Какой-то текст и тд.</span>
</div>
<div class="block _tabs-block">
<span class="text">Какой-то текст и тд.</span>
</div>
</div>
<div class="tabs__nav">
<div class="tabs__slider _swiper">
<div class="item _tabs-item">
<img src="1.jpg" alt="#" class="img">
</div>
<div class="item _tabs-item">
<img src="2.jpg" alt="#" class="img">
</div>
<div class="item _tabs-item">
<img src="3.jpg" alt="#" class="img">
</div>
</div>
</div>
</div>
Но со слайдером табы не работают, если правильно смотрю в devtools, то не навешивается прослушаватель табов.
Подскажите, кто знает, как можно реализовать данную тему?