求助实现无限轮播（Infinite Carousel）：按钮控制无间断循环滚动

要实现无缝无限轮播，核心思路是复制首尾元素填充到轮播容器两端，配合滚动后的位置重置，让视觉上形成无间断循环效果。以下是针对现有代码的修改方案：

1. HTML 修改 #

在 carousel-inner 中，复制最后一张图片添加到最前面，复制第一张图片添加到最后面，这样滚动到边界时能自然衔接：

<div class="banner-section">
  <div class="text-content">
    <p class="category-label">Popular Categories</p>
    <h1>We believe in giving back, today and everyday</h1>
    <p>We collaborate with local animal welfare groups to provide essential resources and assistance to pets in need.</p>
    <button class="view-all-btn">VIEW ALL</button>
  </div>
  <div class="carousel">
    <div class="carousel-inner">
      <!-- 复制最后一张图到开头 -->
      <img src="https://cdn.shopify.com/s/files/1/0652/1238/3477/files/Rectangle_7.png">
      <img src="https://cdn.shopify.com/s/files/1/0652/1238/3477/files/Rectangle_7.png">
      <img src="https://cdn.shopify.com/s/files/1/0652/1238/3477/files/Rectangle_7.png">
      <img src="https://cdn.shopify.com/s/files/1/0652/1238/3477/files/Rectangle_7.png">
      <img src="https://cdn.shopify.com/s/files/1/0652/1238/3477/files/Rectangle_7.png">
      <!-- 复制第一张图到结尾 -->
      <img src="https://cdn.shopify.com/s/files/1/0652/1238/3477/files/Rectangle_7.png">
    </div>
    <button class="carousel-btn prev">&#10094;</button>
    <button class="carousel-btn next">&#10095;</button>
  </div>
</div>

2. CSS 调整 #

移除 carousel-inner 的固定宽度，让它自动适配新增元素的总宽度，同时保持图片的显示比例：

.banner-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
  background-color: #f9f9f9;
}

.text-content {
  width: 30%;
}

.category-label {
  color: #8a7f6e;
  font-weight: bold;
  margin-bottom: 10px;
}

.text-content h1 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.text-content p {
  margin-bottom: 30px;
}

.view-all-btn {
  padding: 10px 20px;
  background-color: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.carousel {
  position: relative;
  width: 65%;
  overflow: hidden;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
  /* 移除固定宽度，让flex自动计算总宽度 */
}

.carousel-inner img {
  width: calc(100% / 1.5);
  border-radius: 10px;
  margin-right: 10px;
}

.carousel-inner img:last-child {
  margin-right: 0;
}

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

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}

3. JavaScript 逻辑更新 #

修改索引控制逻辑，滚动到边界时瞬间重置位置，并隐藏过渡动画的跳转过程：

// 初始索引设为1（跳过开头复制的最后一张图）
let currentIndex = 1;
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const carouselInner = document.querySelector('.carousel-inner');
// 原始图片数量（排除首尾复制的两张）
const originalTotal = document.querySelectorAll('.carousel-inner img').length - 2;
// 每张图片的滚动百分比
const slidePercent = 66.66;

// 初始化位置
carouselInner.style.transform = `translateX(-${currentIndex * slidePercent}%)`;

nextBtn.addEventListener('click', () => {
  currentIndex++;
  carouselInner.style.transition = 'transform 0.5s ease-in-out';
  carouselInner.style.transform = `translateX(-${currentIndex * slidePercent}%)`;

  // 滚动到最后一张复制图时，瞬间重置到原始第一张的位置
  if (currentIndex === originalTotal + 1) {
    setTimeout(() => {
      carouselInner.style.transition = 'none';
      currentIndex = 1;
      carouselInner.style.transform = `translateX(-${currentIndex * slidePercent}%)`;
    }, 500);
  }
});

prevBtn.addEventListener('click', () => {
  currentIndex--;
  carouselInner.style.transition = 'transform 0.5s ease-in-out';
  carouselInner.style.transform = `translateX(-${currentIndex * slidePercent}%)`;

  // 滚动到开头复制图时，瞬间重置到原始最后一张的位置
  if (currentIndex === 0) {
    setTimeout(() => {
      carouselInner.style.transition = 'none';
      currentIndex = originalTotal;
      carouselInner.style.transform = `translateX(-${currentIndex * slidePercent}%)`;
    }, 500);
  }
});

原理说明 #

• 首尾复制元素：让轮播在滚动到边界时，视觉上能衔接下一组/上一组内容，避免出现空白
• 位置重置：在滚动到复制元素的瞬间，关闭过渡动画，将容器位置跳转到对应的原始元素位置，用户不会察觉到跳转过程
• 索引控制：通过currentIndex的边界判断，实现无限循环的逻辑

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