swiper-slider переключение слайдов при наведении на превью

[Mazaxaka_6630]

Добрый день всем! Ребята. На сайте в 1С-Битрикс интегрирован слайдер:
Слайдер находится вот тут:
https://test.oknapanorama.by/test/

Swiper-slider взят от сюда:
https://swiperjs.com/api/
Нужно его доработать так, чтобы слайды переключались при наведении на превьюшку слайда. Никак не получается это реализовать.
Менять слайдер на другой достаточно затратно выходит..
Подскажите пожалуйста в какую сторону копать..

[Mazaxaka_6630]

Да, это понятно.
Но, есть трафик на сайт и с десктопов. И начальство хочет имменно на десктопе видеть такой эффект
Можно как-то решить?

[Mazaxaka_6630]

Rise,

var thumbs = document.querySelectorAll('.gallery-thumbs .swiper-slide');
for (var i = 0; i < thumbs.length; i++) thumbs[i].addEventListener('mouseover', function() { this.click() });

Спасибо, что помогаете, вставил данный код чуть ниже вызова слайдера.
Не хочет отрабатывать.
Может быть конфликтует с событиями самого слайдера?
Я так понимаю не отрабатываем именно click

[рони]

Mazaxaka_6630,
может там не клик а mousedown или иначе.

[Mazaxaka_6630]

рони,
Вот и не могу понять, как имитировать клик при наведении на превьюшку..

[рони]

Mazaxaka_6630,
вставить после инициализации слайдера

$(function() {
$(".swiper-slide").mouseenter(function() {
var down = new MouseEvent("mousedown", {bubbles: true, cancelable: false});
var up = new MouseEvent("mouseup", {bubbles: true, cancelable: false});
  this.dispatchEvent(down);
  this.dispatchEvent(up);
})
});

[Mazaxaka_6630]

var thumbs = document.querySelectorAll('.gallery-thumbs .swiper-slide');
for (var i = 0; i < thumbs.length; i++) thumbs[i].addEventListener('mouseover', function() { this.click() });

Огромное спасибо! Работает)

[Mazaxaka_6630]

Rise,
Большое спасибо вам!

[makdim]

<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>

Не понимаю почему не работает(
help)

[рони]

makdim,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.