Swiper缩略图点击异常：点击最后可见缩略图无法切换视图

核心问题 #

• 开启loop: true的缩略图Swiper，点击最后可见的缩略图时，主滑块能切换到对应内容，但缩略图区域不会自动滚动展示后续幻灯片
• 改用rewind: true替代loop后，点击“播放”按钮跳转到末尾幻灯片时出现异常
• 调整代码后功能基本正常，但切换到其他幻灯片后再次点击播放按钮，视频幻灯片会被显示为第一张

问题根源 #

1. 原代码通过读取data-swiper-slide-index属性获取索引，但loop模式下Swiper会自动复制幻灯片，该属性仅对应原始幻灯片的索引，和循环后的真实索引不匹配，导致判断逻辑出错
2. 播放按钮使用slideTo方法跳转，loop模式下该方法基于DOM的真实位置计算，而非原始幻灯片索引，容易出现位置错乱

解决方案代码 #

const galleryThumbs = new Swiper('.product__thumbnails', {
  loop: true,
  slidesPerView: 4,
  spaceBetween: 14,
  navigation: {
    nextEl: '.slider-nav__next',
  },
});

const galleryTop = new Swiper('.product__gallery', {
  loop: true,
  autoHeight: true,
  spaceBetween: 10,
  thumbs: {
    swiper: galleryThumbs,
  },
});

// 修正缩略图点击滚动逻辑
galleryThumbs.on('click', function(e) {
  const clickedSlide = e.target.closest('.swiper-slide');
  if (!clickedSlide) return;

  // 获取点击幻灯片的真实循环索引
  const clickedIndex = galleryThumbs.clickedIndex;
  // 获取最后可见幻灯片的索引
  const lastVisibleIndex = galleryThumbs.visibleSlides.at(-1).swiperSlideIndex;

  // 点击最后可见幻灯片时，自动滚动到下一组
  if (clickedIndex === lastVisibleIndex) {
    galleryThumbs.slideNext();
  }
});

{% if has_video %}
  $('button.product__play').click(function(e) {
    e.preventDefault();
    // Loop模式下使用slideToLoop确保跳转正确的循环位置
    const targetLoopIndex = {{ video_sequence_number }} - 1;
    galleryTop.slideToLoop(targetLoopIndex);
    
    // 触发视频播放
    const slideVideo = $('.product__gallery').find('.slider__slide[data-slide="video"]');
    if (slideVideo.length > 0) {
      slideVideo.find(".deferred-media__poster").trigger('click');
    } else {
      console.error('Video element not found.');
    }
  });
{% endif %}

关键调整点 #

1. 缩略图点击逻辑优化
   • 用Swiper原生的clickedIndex获取点击幻灯片的真实循环索引，避免依赖DOM属性的误差
   • 直接调用slideNext()实现滚动，替代复杂的索引计算，完美适配loop模式的循环逻辑
2. 视频跳转逻辑修正
   • 将slideTo替换为slideToLoop，该方法在loop模式下会基于原始幻灯片索引计算循环后的正确位置，彻底解决再次点击时的位置错乱问题
   • 修正主滑块选择器，确保能准确找到视频幻灯片元素

额外提示 #

• 必须保证主滑块和缩略图滑块的loop配置一致，否则联动逻辑会出现异常
• 若需要更精细的可见区域判断，可使用Swiper的getVisibleSlides()方法，结合swiperSlideIndex属性获取准确的可见幻灯片索引

内容的提问来源于stack exchange，提问作者BredBul