Как менять слайд SwiperJS при наведении?

Question

[stetxems]

Как менять слайд SwiperJS при наведении? При клике есть параметр slideToClickedSlide, а при наведении не нашел.
Пробовал еще вот такой метод:

const swiperContainer = document.querySelectorAll('.swiper-slide__container');

 const itemsThumbs = new Swiper(n.querySelector('.items-slider'), {
    spaceBetween: 20,
    centeredSlides: true,
    slideToClickedSlide: true,
    slidesPerView: 3,
    mousewheel: {
      releaseOnEdges: true
    },
    keyboard: true,
    observer: true,
    observeParents: true,
    grabCursor: true,
    speed: 600,
    breakpoints: {
      1200: {
        slidesPerView: 3,
      },
      950: {
        slidesPerView: 2,
      },
      300: {
        spaceBetween: 70,
        slidesPerView: 1,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
    },
    on: {
      init: function () {
        swiperContainer.forEach(elem => {
          elem.addEventListener('mouseover', () => {
            console.log(elem.slideNext())
          });
        });
      },
  });

});

но не знаю, как правильно менять слайд при наведении.

Comments

[Froggyweb]

что значит менять?
можно через сss
можно в js повесить событие mouseenter и выполнять свой скрипт или вызывать методыAPI слайдера

[stetxems]

Froggyweb, событие повесил,а как метод в этом событии вызвать, что б поменялся на тот слайд который навел.Пример показал

[Froggyweb]

ну нужно посчитать сколько слайдов впереди, учесть зацикленный слвйдер или нет. ну и перейти к слвйду slideTo или как там
можно наверное переопределить метод slideToClickedSlide или скопипастить

Answer 1

[Егор Данченко]

Здесь обычный JS код. При наведении на слайд нужно выполнить метод slideNext()
Напишу на jQuery для быстроты и общего понимания:

const swiper = new Swiper('.swiper-container');
$('.swiper-container .swiper-slide').hover(function () {
  swiper.slideNext();
});

Comments

[stetxems]

уже пробовал это, не работает, да и если предыдущий слайд наводишь, оно все равно будет вперед листать по идеи

[Егор Данченко]

stetxems, что именно не работает? Слайд не меняется? Если да, значит событие не так навесили. Попробуйте вызвать метод просто при инициализации, посмотрите, сработает ли он.

[Егор Данченко]

stetxems, а если навесить событие на .swiper-container?

[stetxems]

Егор Данченко, вот что в консоле пишет Uncaught TypeError: e.slideNext is not a function

[Егор Данченко]

stetxems, Можете отправить код?

[stetxems]

Пробовал еще просто при наведении на const swiper = new Swiper('.swiper-container'); имитацию клика делать но ничего не происходит, если кликать мышкой то работает

[Егор Данченко]

stetxems, так есть для этого классы "swiper-slide-next" и "swiper-slide-prev"

[stetxems]

Егор Данченко, обновил пост

[Егор Данченко]

stetxems, навесьте события не в методе init, а под объявлением константы swiperContainer.

[Егор Данченко]

stetxems, попробуйте посмотреть здесь

Answer 2

[Максим Самарцев]

Если актуально. Я решил через:

this.$swiper.pagination?.bullets?.each((idx, el) => {
          el.addEventListener('mouseenter', function() {
            slider.slideTo(idx)
          })
        })

Это я делал на VueJs(Nuxt.js)
Там есть проблема с инициализацией при переходе, с ней пока не разобрался, при таком методе вы сможете слайдер в ссылку положить например и кликать по ней для перехода, а при наведении менять слайды.