HTML网页中实现多Carousel：多产品图片轮播布局方案咨询

核心思路很简单：给每个产品单独创建一套独立的轮播容器，复用单轮播的逻辑，只要保证每个轮播的DOM元素（容器、控制按钮、指示器）的标识唯一，就不会互相干扰。下面提供两种实用的实现方式：

一、原生HTML/CSS/JS实现 #

这种方式不需要依赖框架，完全自定义控制逻辑。

HTML结构 #

每个产品轮播是一个独立的.product-carousel容器，内部包含图片列表和切换按钮：

<!-- 第一个产品轮播 -->
<div class="product-carousel">
  <div class="carousel-images">
    <img src="product1-img1.jpg" alt="产品1图片1" class="active">
    <img src="product1-img2.jpg" alt="产品1图片2">
    <img src="product1-img3.jpg" alt="产品1图片3">
  </div>
  <button class="carousel-btn prev">←</button>
  <button class="carousel-btn next">→</button>
</div>

<!-- 第二个产品轮播 -->
<div class="product-carousel">
  <div class="carousel-images">
    <img src="product2-img1.jpg" alt="产品2图片1" class="active">
    <img src="product2-img2.jpg" alt="产品2图片2">
  </div>
  <button class="carousel-btn prev">←</button>
  <button class="carousel-btn next">→</button>
</div>

CSS样式 #

控制轮播的显示逻辑，隐藏非当前图片，美化按钮：

.product-carousel {
  position: relative;
  width: 400px;
  margin: 20px 0;
  overflow: hidden;
}

.carousel-images {
  display: flex;
  transition: transform 0.3s ease;
}

.carousel-images img {
  width: 100%;
  flex-shrink: 0;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }

JS逻辑 #

给每个轮播独立绑定切换事件，通过父容器找到当前轮播的图片列表，避免全局冲突：

// 获取所有产品轮播容器
const carousels = document.querySelectorAll('.product-carousel');

carousels.forEach(carousel => {
  const images = carousel.querySelector('.carousel-images');
  const prevBtn = carousel.querySelector('.prev');
  const nextBtn = carousel.querySelector('.next');
  let currentIndex = 0;
  const totalImages = images.children.length;

  // 切换图片的函数
  function goToIndex(index) {
    if (index < 0) index = totalImages - 1;
    if (index >= totalImages) index = 0;
    currentIndex = index;
    images.style.transform = `translateX(-${currentIndex * 100}%)`;
  }

  // 绑定按钮事件
  prevBtn.addEventListener('click', () => goToIndex(currentIndex - 1));
  nextBtn.addEventListener('click', () => goToIndex(currentIndex + 1));
});

二、基于Bootstrap的实现（更快捷） #

如果你用Bootstrap框架，只需要给每个轮播设置唯一的ID，控制按钮的data-bs-target对应即可：

<!-- 第一个产品轮播 -->
<div id="carouselProduct1" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="product1-img1.jpg" class="d-block w-100" alt="产品1图片1">
    </div>
    <div class="carousel-item">
      <img src="product1-img2.jpg" class="d-block w-100" alt="产品1图片2">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselProduct1" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselProduct1" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<!-- 第二个产品轮播 -->
<div id="carouselProduct2" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="product2-img1.jpg" class="d-block w-100" alt="产品2图片1">
    </div>
    <div class="carousel-item">
      <img src="product2-img2.jpg" class="d-block w-100" alt="产品2图片2">
    </div>
    <div class="carousel-item">
      <img src="product2-img3.jpg" class="d-block w-100" alt="产品2图片3">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselProduct2" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselProduct2" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

关键点：每个轮播的id必须唯一，控制按钮的data-bs-target要和对应轮播的id完全匹配，Bootstrap会自动为每个轮播创建独立的实例，不会互相影响。

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