如何在同一页面创建多组Fancyapps Carousel缩略图？

你说的没错，问题确实出在官方示例里的getElementById("myCarousel")——这个方法只能获取单个DOM元素，多组轮播需要改成批量初始化的方式，具体操作如下：

1. 调整HTML结构 #

给每组轮播套上独立容器，同时用唯一ID标记主轮播，用自定义属性关联对应的缩略图容器，示例结构：

<!-- 第一组轮播 -->
<div class="carousel-group">
  <div class="main-carousel" id="carousel-1">
    <div><img src="主图1-1.jpg" alt="主图1"></div>
    <div><img src="主图1-2.jpg" alt="主图2"></div>
    <div><img src="主图1-3.jpg" alt="主图3"></div>
  </div>
  <!-- 用data-for关联对应的主轮播ID -->
  <div class="thumbs-carousel" data-for="carousel-1">
    <div><img src="缩略图1-1.jpg" alt="缩略图1"></div>
    <div><img src="缩略图1-2.jpg" alt="缩略图2"></div>
    <div><img src="缩略图1-3.jpg" alt="缩略图3"></div>
  </div>
</div>

<!-- 第二组轮播 -->
<div class="carousel-group">
  <div class="main-carousel" id="carousel-2">
    <div><img src="主图2-1.jpg" alt="主图1"></div>
    <div><img src="主图2-2.jpg" alt="主图2"></div>
    <div><img src="主图2-3.jpg" alt="主图3"></div>
  </div>
  <div class="thumbs-carousel" data-for="carousel-2">
    <div><img src="缩略图2-1.jpg" alt="缩略图1"></div>
    <div><img src="缩略图2-2.jpg" alt="缩略图2"></div>
    <div><img src="缩略图2-3.jpg" alt="缩略图3"></div>
  </div>
</div>

2. 批量初始化轮播实例 #

不再单独获取单个ID，而是遍历所有主轮播容器，逐个初始化并关联对应的缩略图，JS代码示例：

// 等DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有主轮播容器
  const mainCarousels = document.querySelectorAll('.main-carousel');

  mainCarousels.forEach(carouselEl => {
    // 获取当前主轮播的ID
    const carouselId = carouselEl.id;
    // 找到对应关联的缩略图容器
    const thumbsEl = document.querySelector(`.thumbs-carousel[data-for="${carouselId}"]`);

    // 初始化当前轮播
    new Carousel(carouselEl, {
      slidesPerPage: 1,
      infinite: true,
      // 挂载缩略图插件
      plugins: [
        new Thumbs({
          parent: thumbsEl,
          slidesPerPage: 3,
          infinite: false
        })
      ]
    });
  });
});

3. 关键注意点 #

• 每组的data-for属性值必须和主轮播的ID完全一致，否则会关联失败
• 可以通过.carousel-group类给每组轮播加独立样式，避免组与组之间的样式冲突
• 确保Fancyapps Carousel和Thumbs插件的脚本已经正确引入到页面中

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