Переключение слайда при наведении на миниатюру Swiper.js
Всем привет!
есть слайдер с вертикальными миниатюрами. Сейчас при клике на миниатюру переключается слайд. А нужно, что бы это было при наведении на неё. Последней строчкой кода я пытался этого добиться. Подскажите , пожалуйста, как это корректно сделать?
Спасибо!
Пример слайдера https://prnt.sc/w7vttf
<div class="swiper-container swiperExp">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></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="[*image*]" alt="[*pagetitle*]"></div>
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
</div>
</div>
<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,
}
});
var thumbs = document.querySelectorAll('.swiperExp .swiper-slide');
for (var i = 0; i < thumbs.length; i++) thumbs[i].addEventListener('mouseover', function() { this.click() });
</script>
Ответы (1 шт):
Автор решения: Дмитрий Макаревич
→ Ссылка
Меняем скрипт в вопросе на этот. и всё заработает. Может кому пригодится
var thumbs = document.querySelectorAll('.swiperExp .swiper-slide'); thumbs.forEach(el => el.addEventListener('mouseenter', function() {mySwiper.slideTo(el.dataset.swiperSlideIndex) }));