How to Swiper Slider Mouse Hover Pagination

Question

var sliderThumbs = new Swiper('.slider .slider-thumbs', {
            slidesPerView: 'auto',
            });
          var slidercontent = new Swiper('.slider .slider-content', {
            disableOnInteraction: false,
            thumbs: {
              swiper: sliderThumbs,
            },
          });

slide change to thumbs hover

not working the following code

$('.swiper-slide.thumb-slide').hover(function() {
      $( this ).trigger( "click" );
   });   

i do sorry for my bad english

Answer 1

$( this ).trigger( "click" ) won't work because the thumbnail slides don't actually have click events bound to them. Instead, you can call the slideTo() method and use the thumbnail's index, like so:

$('.swiper-slide').on('mouseover', function() {
    slidercontent.slideTo($(this).index());
})

See the following:

• Swiper API methods: https://swiperjs.com/api/#methods
• jQuery's .index() method: https://api.jquery.com/index/