@stetxems

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

Как менять слайд 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())
          });
        });
      },
  });

});

но не знаю, как правильно менять слайд при наведении.
  • Вопрос задан
  • 1570 просмотров
Пригласить эксперта
Ответы на вопрос 2
@YahorDanchanka
Frontend developer
Здесь обычный JS код. При наведении на слайд нужно выполнить метод slideNext()
Напишу на jQuery для быстроты и общего понимания:
const swiper = new Swiper('.swiper-container');
$('.swiper-container .swiper-slide').hover(function () {
  swiper.slideNext();
});
Ответ написан
@webstr-samarcev
Jun, web-dev, Vue/Nuxt.
Если актуально. Я решил через:
this.$swiper.pagination?.bullets?.each((idx, el) => {
          el.addEventListener('mouseenter', function() {
            slider.slideTo(idx)
          })
        })

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы