在 Bootstrap 4 中如何实现多项目轮播？-html教程-PHP中文网

在 Bootstrap 4 中如何实现多项目轮播？

聖光之護

发布： 2025-04-22 13:32:24

原创

996人浏览过

在 bootstrap 4 中实现多项目轮播的方法

在 Bootstrap 4 中，实现多项目轮播是一个常见的需求。尽管 Bootstrap 的官方文档提到了多个轮播，但并未详细说明如何在一个轮播中同时显示多个项目。本文将详细介绍如何在 Bootstrap 4 中实现这一功能。

在 Bootstrap 4 中，你可以通过调整 CSS 和 HTML 来实现多项目轮播。首先，你需要在轮播项目中使用列（例如 .col-xs-4）来放置内容，这样可以在一个轮播项目中显示多个内容块。以下是一个基本的示例代码：

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="row">
        <div class="col-xs-4">{content}</div>
        <div class="col-xs-4">{content}</div>
        <div class="col-xs-4">{content}</div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row">
        <div class="col-xs-4">{content}</div>
        <div class="col-xs-4">{content}</div>
        <div class="col-xs-4">{content}</div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row">
        <div class="col-xs-4">{content}</div>
        <div class="col-xs-4">{content}</div>
        <div class="col-xs-4">{content}</div>
      </div>
    </div>
  </div>
</div>

登录后复制

这种方法可以在一个轮播项目中显示三个内容块，但它并不能实现每次推进一个项目的效果。Bootstrap 4 的默认设置并不支持这种高级功能。

如果你的项目需要每次推进一个项目，并且希望继续使用 Bootstrap，那么可以考虑使用一些外部资源来实现这个功能。例如，MarkitDigital 在 CodePen 上提供了一个脚本，可以实现单项和多项轮播的效果。你可以参考这个脚本来调整你的 Bootstrap 轮播。

然而，如果你发现 Bootstrap 的限制太多，无法满足你的需求，我建议你考虑使用其他轮播库。例如，Slick.js 是一个非常轻量级的轮播库（约 5k min’d 和 gzipped），它提供了丰富的配置选项，可以满足多种轮播需求。

总之，虽然 Bootstrap 4 可以用于创建基本的多项目轮播，但如果需要更复杂的功能，建议结合其他库或资源来实现。

在 Bootstrap 4 中如何实现多项目轮播？