Сейчас смена слайдов происходит при клике на превью. А хотелось бы переделать, что бы смена была при наведении на превью. Пробовал способы из данной темы, не получилось(
Если есть идеи как это сделать, был бы очень признателен!
спасибо!
Ниже накидал тестовый макет
ps селекторы поправил. спасибо!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>
<body>
<div class="containerFlex">
<div class="swiper-container swiperExp">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-container swiperOneMain">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
</div>
</div>
</div>
<style>
.containerFlex {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1024px;
min-width: 0;
max-height: 500px;
}
.swiperExp {
min-width: 0;
}
.swiperOneMain {
min-width: 0;
}
.swiperExp img {
width: 100%;
height: 100%;
object-fit: cover;
}
.swiperOneMain img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
const slider = document.querySelector('.swiperOneMain');
const sliderNav = document.querySelector('.swiperExp');
let mySwiperNav = new Swiper(sliderNav, {
slidesPerView: 5,
spaceBetween: 10,
loopedSlides: 5,
freeMode: true,
loop: true,
direction: 'vertical',
});
let mySwiper = new Swiper(slider, {
spaceBetween: 10,
loopedSlides: 5,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: mySwiperNav,
}
});
sliderNav.slides.on('mouseenter', function() {
slider.slideTo(Swiper.$(this).index())
});
</script>
</body>
</html>
|