咨询：无需jQuery的Bootstrap 5多项目无限轮播组件实现方法

嘿，我完全懂你的需求——要一个不依赖jQuery、能同时展示多个项目，还能无限无缝循环的Bootstrap 5轮播对吧？官方默认的轮播确实是单项目的，要实现你要的效果得做点定制调整，下面给你几个靠谱的思路和具体实现步骤：

思路一：基于Bootstrap原生轮播改造（推荐） #

Bootstrap 5的轮播本身支持基础循环，但多项目展示和真正的无缝循环需要我们调整布局+克隆首尾项目来实现。

步骤1：调整布局实现多项目同时展示 #

首先修改CSS，让轮播容器变成弹性布局，控制每个轮播项的宽度来实现多项目展示：

.carousel-inner {
  display: flex;
  overflow: hidden;
}

.carousel-item {
  flex: 0 0 33.333%; /* 同时展示3个项目，可根据需求修改百分比 */
  transition: transform 0.6s ease-in-out;
}

/* 响应式适配示例：移动端只展示1个项目 */
@media (max-width: 576px) {
  .carousel-item {
    flex: 0 0 100%;
  }
}

步骤2：克隆首尾项目实现无缝循环 #

用原生JS克隆轮播的第一个和最后一组项目，分别放到轮播的末尾和开头。这样当轮播滚动到最后一个真实项目时，后面跟着克隆的第一个项目，滚动完成后立刻切换到真正的第一个项目（视觉上完全无感知）；同理向前滚动也是如此。

JS代码示例：

document.addEventListener('DOMContentLoaded', function() {
  const carousel = document.getElementById('multi-carousel');
  const inner = carousel.querySelector('.carousel-inner');
  const items = Array.from(inner.querySelectorAll('.carousel-item'));
  const itemWidthPercent = 33.333; // 和CSS里的宽度对应

  // 克隆首尾项目
  const firstClone = items[0].cloneNode(true);
  const lastClone = items[items.length - 1].cloneNode(true);

  // 添加克隆项到容器
  inner.appendChild(firstClone);
  inner.insertBefore(lastClone, items[0]);

  // 初始化时定位到第一个真实项目（跳过前面的克隆项）
  inner.style.transform = `translateX(-${itemWidthPercent}%)`;

  // 监听轮播滑动完成事件，处理无缝切换
  carousel.addEventListener('slid.bs.carousel', function() {
    const activeItems = inner.querySelectorAll('.carousel-item.active');
    const activeIndex = Array.from(inner.children).indexOf(activeItems[0]);

    // 滚动到最后一个克隆项（原第一个项目），跳转到真实第一个项目
    if (activeIndex === items.length + 1) {
      inner.style.transition = 'none';
      inner.style.transform = `translateX(-${itemWidthPercent}%)`;
      // 手动切换active类，避免闪烁
      items[0].classList.add('active');
      inner.children[items.length + 1].classList.remove('active');
      // 重新启用过渡动画
      setTimeout(() => inner.style.transition = 'transform 0.6s ease-in-out', 50);
    }

    // 滚动到最前面的克隆项（原最后一个项目），跳转到真实最后一个项目
    if (activeIndex === 0) {
      inner.style.transition = 'none';
      inner.style.transform = `translateX(-${items.length * itemWidthPercent}%)`;
      items[items.length - 1].classList.add('active');
      inner.children[0].classList.remove('active');
      setTimeout(() => inner.style.transition = 'transform 0.6s ease-in-out', 50);
    }
  });
});

步骤3：HTML结构示例 #

<div id="multi-carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
  <div class="carousel-inner">
    <!-- 真实轮播项目 -->
    <div class="carousel-item active">
      <div class="p-2">项目1</div>
      <div class="p-2">项目2</div>
      <div class="p-2">项目3</div>
    </div>
    <div class="carousel-item">
      <div class="p-2">项目4</div>
      <div class="p-2">项目5</div>
      <div class="p-2">项目6</div>
    </div>
    <div class="carousel-item">
      <div class="p-2">项目7</div>
      <div class="p-2">项目8</div>
      <div class="p-2">项目9</div>
    </div>
  </div>
  <!-- 控制按钮 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#multi-carousel" 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="#multi-carousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

思路二：完全自定义无限滚动组件 #

如果觉得改造原生轮播太繁琐，也可以自己从零实现：

• 用一个容器包裹所有轮播项，设置display: flex，让项目横向排列
• 通过修改容器的transform: translateX()实现滚动
• 滚动到边界时，瞬间重置容器位置（配合克隆项实现无缝）
• 用setInterval实现自动播放，手动按钮触发滚动逻辑

这种方式更灵活，但需要自己处理控制按钮、自动播放暂停（比如鼠标悬停时停止）等细节。

关键注意事项 #

• 确保所有轮播项高度一致，避免滚动时出现跳动，可以给.carousel-item设置固定高度，或者用Flex布局让内容自适应
• 响应式适配一定要做好，不同屏幕下调整展示的项目数量
• 测试手动点击前后按钮、自动播放的边缘情况，比如只有2组项目时的循环是否正常

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