Переключение слайда при наведении на миниатюру 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) }));

→ Ссылка