如何滑动滑块鼠标悬停分页

Question

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

滑动更改为拇指悬停

无法使用以下代码

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

对不起我的英语不好

Answer 1

$( this ).trigger( "click" ) 将不起作用，因为缩略图幻灯片实际上没有绑定 click 事件。相反，您可以调用 slideTo() 方法并使用缩略图的索引，如下所示：

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

查看以下内容：

Swiper API 方法：https://swiperjs.com/api/#methods
jQuery的.index()方法：https://api.jquery.com/index/

如何滑动滑块鼠标悬停分页

How to Swiper Slider Mouse Hover Pagination

javascript

jquery

slider

slide

swiper