如何实现Bootstrap 5轮播图每屏2项且每次滚动1个？

核心思路 #

放弃复杂的网格嵌套方案，直接通过自定义CSS修改轮播项的布局方式，结合Bootstrap原生轮播的切换逻辑，实现每屏展示2个项目、每次点击滚动1个项目的效果，且不依赖项目总数为特定倍数。

实现代码 #

HTML结构

保持Bootstrap轮播的基础结构，每个轮播项对应一个内容单元：

<div id="multiItemCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <!-- 轮播项：每个项对应一个内容单元 -->
    <div class="carousel-item active">
      <div class="p-3 border bg-light">项目1：自定义内容</div>
    </div>
    <div class="carousel-item">
      <div class="p-3 border bg-light">项目2：自定义内容</div>
    </div>
    <div class="carousel-item">
      <div class="p-3 border bg-light">项目3：自定义内容</div>
    </div>
    <div class="carousel-item">
      <div class="p-3 border bg-light">项目4：自定义内容</div>
    </div>
    <div class="carousel-item">
      <div class="p-3 border bg-light">项目5：自定义内容</div>
    </div>
  </div>
  <!-- 控制按钮 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#multiItemCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">上一个</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#multiItemCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">下一个</span>
  </button>
</div>

CSS样式

覆盖Bootstrap轮播的默认定位，使用Flex布局实现多项展示：

/* 轮播容器设置为Flex布局，禁止换行 */
.carousel-inner {
  display: flex;
  flex-wrap: nowrap;
}

/* 每个轮播项占50%宽度，实现每屏2项 */
.carousel-item {
  position: relative;
  flex: 0 0 50%;
  width: 50%;
  margin-right: -100%;
  display: block;
}

/* 小屏幕适配：每屏显示1项 */
@media (max-width: 768px) {
  .carousel-item {
    flex: 0 0 100%;
    width: 100%;
  }
}

（可选）指示器配置

如果需要添加轮播指示器，直接按原生方式添加，每个指示器对应一个轮播项即可：

<!-- 添加到轮播容器内，carousel-inner上方 -->
<div class="carousel-indicators">
  <button type="button" data-bs-target="#multiItemCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#multiItemCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#multiItemCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
  <button type="button" data-bs-target="#multiItemCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
  <button type="button" data-bs-target="#multiItemCarousel" data-bs-slide-to="4" aria-label="Slide 5"></button>
</div>

方案优势 #

• 无额外依赖，仅基于Bootstrap 5原生API和少量自定义CSS
• 支持任意数量的项目（奇数/偶数均可）
• 原生控制按钮、指示器完全兼容，无需自定义JS逻辑
• 代码简洁，易维护，无复杂嵌套或潜在bug

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