samdo,
смотрите что у вас не так ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.swiper {
width: 600px;
height: 300px;
border: 1px solid red;
}
section {
display: none;
}
section.active {
display: block;
}
.tab-link.active {
background-color: #FFD700;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
window.addEventListener("load", function() {
const tabs = [...document.querySelectorAll(".tab-body")];
for (const tab of tabs) {
tab.classList.add("active");
const divs = [...tab.querySelectorAll(".swiper")];
const swiper = new Swiper(divs[1], {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
new Swiper(divs[0], {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
thumbs: {
swiper: swiper
}
});
tab.classList.remove("active");
}
tabs[0].classList.add("active");
})
</script>
</head>
<body>
<ul class="tab-head">
<li>
<a href="#tab-1" class="tab-link active">
Tab 1
</a>
</li>
<li>
<a href="#tab-2" class="tab-link">
Tab 2
</a>
</li>
</ul>
<section id="tab-1" class="tab-body entry-content active">
<div class="swiper">
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Thumb 1</div>
<div class="swiper-slide">Thumb 2</div>
<div class="swiper-slide">Thumb 3</div>
<div class="swiper-slide">Thumb 4</div>
<div class="swiper-slide">Thumb 5</div>
</div>
</div>
</section>
<section id="tab-2" class="tab-body entry-content">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide2 1</div>
<div class="swiper-slide">Slide2 2</div>
<div class="swiper-slide">Slide2 3</div>
<div class="swiper-slide">Slide2 4</div>
<div class="swiper-slide">Slide2 5</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Thumb2 1</div>
<div class="swiper-slide">Thumb2 2</div>
<div class="swiper-slide">Thumb2 3</div>
<div class="swiper-slide">Thumb2 4</div>
<div class="swiper-slide">Thumb2 5</div>
</div>
</div>
</section>
<script>
document.addEventListener("DOMContentLoaded", function() {
let elem = document.querySelector(".tab-head");
elem.addEventListener("click", function({
target
}) {
if (target.closest(".tab-link")) {
elem.querySelector(".tab-link.active").classList.remove("active");
target.classList.add("active");
const id = target.getAttribute("href");
document.querySelector(".tab-body.active").classList.remove("active");
document.querySelector(id).classList.add("active");
};
})
})
</script>
</body>
</html>
|