如何使同data-slide-index的缩略图同步幻灯片的.selected类切换状态？

1. 同步.selected类的切换状态 #

方法一：用MutationObserver监听类变化（无需修改原有切换逻辑） #

适合无法直接修改幻灯片切换代码的场景，自动监听幻灯片项的类变化并同步到对应缩略图：

// 监听所有幻灯片项的class属性变化
document.querySelectorAll('.ProductItem-gallery-slides-item').forEach(slide => {
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (mutation.attributeName === 'class') {
        const slideIndex = slide.dataset.slideIndex;
        const targetThumb = document.querySelector(`.ProductItem-gallery-thumbnails-item[data-slide-index="${slideIndex}"]`);
        if (targetThumb) {
          // 同步selected类的状态
          targetThumb.classList.toggle('selected', slide.classList.contains('selected'));
        }
      }
    });
  });

  observer.observe(slide, { attributes: true });
});

方法二：直接在切换逻辑中同步（自定义切换场景） #

如果是自己编写的幻灯片切换函数，直接在切换时同步缩略图的类：

function switchToSlide(targetIndex) {
  // 重置所有幻灯片的selected类
  document.querySelectorAll('.ProductItem-gallery-slides-item').forEach(s => s.classList.remove('selected'));
  // 给目标幻灯片添加selected类
  const activeSlide = document.querySelector(`.ProductItem-gallery-slides-item[data-slide-index="${targetIndex}"]`);
  if (activeSlide) {
    activeSlide.classList.add('selected');
    
    // 同步缩略图的selected类
    document.querySelectorAll('.ProductItem-gallery-thumbnails-item').forEach(t => t.classList.remove('selected'));
    const activeThumb = document.querySelector(`.ProductItem-gallery-thumbnails-item[data-slide-index="${targetIndex}"]`);
    if (activeThumb) activeThumb.classList.add('selected');
  }
}

2. 禁用缩略图的交互性 #

通过CSS彻底禁止缩略图的点击、悬停等交互行为，让它成为静态元素：

.ProductItem-gallery-thumbnails-item {
  pointer-events: none; /* 阻止所有鼠标交互事件 */
  cursor: default; /* 重置鼠标指针样式 */
}

/* 可选：覆盖原有hover样式（如果存在） */
.ProductItem-gallery-thumbnails-item:hover {
  background-color: inherit;
  border-color: inherit;
  /* 根据原有样式补充其他重置规则 */
}

补充说明 #

如果使用第三方轮播插件（如Swiper），优先使用插件自带的回调事件（比如slideChange）来同步类状态，比MutationObserver更高效。

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