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

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - swiper-slider переключение слайдов при наведении на превью (https://javascript.ru/forum/misc/80119-swiper-slider-pereklyuchenie-slajjdov-pri-navedenii-na-prevyu.html)

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

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

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

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

Rise,

Цитата:

Сообщение от Rise (Сообщение 523579)

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,
вставить после инициализации слайдера

$(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);
})
});

Цитата:

Сообщение от Rise (Сообщение 523579)

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

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

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

Тоже мучаюсь с данной проблемой.

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

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.

Цитата:

Сообщение от рони (Сообщение 531995)

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

Да спасибо так гораздо лучше!)
извиняюсь первый раз тут)

Цитата:

Сообщение от makdim

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

что не работает?

Цитата:

Сообщение от makdim

Да спасибо так гораздо лучше!)

здесь лучше макет целиком а не блоками

Цитата:

Сообщение от makdim

nextEl: 'swiper-button-next',
20
prevEl: 'swiper-button-prev',

css селекторы не корректные, нужна точка в начале класса.

Сейчас смена слайдов происходит при клике на превью. А хотелось бы переделать, что бы смена была при наведении на превью. Пробовал способы из данной темы, не получилось(

Если есть идеи как это сделать, был бы очень признателен!
спасибо!

Ниже накидал тестовый макет
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>

makdim,
строку 95 заменить на

var thumbs = document.querySelectorAll('.swiperExp .swiper-slide');
    thumbs.forEach(el => el.addEventListener('mouseenter', function() {mySwiper.slideTo(el.dataset.swiperSlideIndex) }));

Цитата:

Сообщение от рони (Сообщение 532001)

makdim,
строку 95 заменить на

var thumbs = document.querySelectorAll('.swiperExp .swiper-slide');
    thumbs.forEach(el => el.addEventListener('mouseenter', function() {mySwiper.slideTo(el.dataset.swiperSlideIndex) }));

всё работает!
спасибо огромное!