07.02.2023, 23:46
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
swiper init hide tab
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>
|
|
08.02.2023, 05:45
|
|
Аспирант
|
|
Регистрация: 27.05.2017
Сообщений: 98
|
|
|
Да, работает. Спасибо огромное!!! Очень выручили.
|
|
10.02.2023, 21:26
|
|
Аспирант
|
|
Регистрация: 27.05.2017
Сообщений: 98
|
|
Подскажите, что не так с breakpoints, на мобиле большой слайдер начинает бешено дергаться 
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,
breakpoints: {
320: {
slidesPerView: 2,
spaceBetween: 4,
},
640: {
slidesPerView: 3,
spaceBetween: 10,
},
1024: {
slidesPerView: 4,
spaceBetween: 10,
}
},
watchSlidesProgress: true,
});
new Swiper(divs[0], {
spaceBetween: 10,
slidesPerView: 1,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
thumbs: {
swiper: swiper
}
});
tab.classList.remove("active");
}
tabs[0].classList.add("active");
})
|
|
10.02.2023, 22:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
samdo,
не могу подсказать, можно только гадать, возможно какой-то блок перекрывает другой при фокусе.
|
|
12.02.2023, 21:29
|
|
Аспирант
|
|
Регистрация: 27.05.2017
Сообщений: 98
|
|
Сообщение от рони
|
samdo,
не могу подсказать, можно только гадать, возможно какой-то блок перекрывает другой при фокусе.
|
да, он у меня внутри grid, все время забываю, что для swiper нельзя указывать 1fr, а нужно конкретный размер в px или в %, иначе он для себя не может высчитать свою же ширину |
|
22.04.2023, 12:19
|
|
Аспирант
|
|
Регистрация: 27.05.2017
Сообщений: 98
|
|
|
Сообщение от рони
|
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>
|
День добрый! Подскажите, как тут сделать смену слайдов не по клику на превьюшки, а при наведении на них курсора. Если возможно.
|
|
22.04.2023, 15:10
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от samdo
|
|
при наведении на них курсора. Если возможно.
|
возможно, но надо писать вручную, в настройках Swiper этого нет.
но есть Api |
|
22.04.2023, 15:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Swiper in tab and mouseenter thumbs
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,
});
const slider = new Swiper(divs[0], {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
thumbs: {
swiper: swiper
}
});
divs[1].querySelectorAll(".swiper-slide").forEach(
(e, i) => {
e.addEventListener("mouseenter", function() {
slider.slideTo(i, 500)
})
}
)
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>
|
|
|
|
