Приветствую! Есть слайдер на swiper js. Реализован эффект приближения, но никак не могу добиться нужного результата. Смысл в том, что при клике по изображению эффект приближения должен остановиться (встать на паузу) в том же месте, где он был когда я по нему кликнул. Так же, в этот момент должен остановиться autoplay слайдера. Остановка происходит на 5 секунд, либо возобновляется при повторном клике по изображению (если 5 секунд не прошло). На данный момент клик срабатывает не так как надо, эффект приближения не останавливается, а возвращается в исходный размер, плюс не встает на паузу autoplay. Если кто-то сможет помочь, буду благодарен. Мой код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swiper Slider with Zoom Effect</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.swiper-container {
width: 100%;
height: 100vh;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.swiper-slide img {
max-width: 100%;
transition: transform 5s ease-in-out;
}
.zoom {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://images.wallpaperscraft.com/image/single/lynx_animal_predator_1398659_1920x1080.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://images.wallpaperscraft.com/image/single/lake_trees_sunset_1398065_1920x1080.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://images.wallpaperscraft.com/image/single/field_river_trees_1399666_1920x1080.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
let zoomInterval;
let isPaused = false;
function startZoom() {
const activeSlide = document.querySelector('.swiper-slide-active img');
if (activeSlide) {
activeSlide.classList.add('zoom');
zoomInterval = setTimeout(() => {
activeSlide.classList.remove('zoom');
swiper.slideNext();
startZoom();
}, 5000);
}
}
function stopZoom() {
const activeSlide = document.querySelector('.swiper-slide-active img');
if (activeSlide) {
clearTimeout(zoomInterval);
activeSlide.classList.remove('zoom');
}
}
function togglePause() {
isPaused = !isPaused;
const activeSlide = document.querySelector('.swiper-slide-active img');
if (isPaused) {
stopZoom();
} else {
startZoom();
}
}
swiper.on('slideChange', () => {
if (!isPaused) {
stopZoom();
startZoom();
}
});
document.querySelectorAll('.swiper-slide').forEach(slide => {
slide.addEventListener('click', togglePause);
});
// Начинаем эффект приближения
startZoom();
</script>
</body>
</html>
