如何在Bootstrap 4中实现一次显示多个项目的轮播功能？

在 bootstrap 4 中实现多项目轮播的技巧

在进行网页开发时，利用 Bootstrap 4 常常会遇到需要实现多项目轮播的需求。然而，尽管 Bootstrap 4 的官方文档提到了轮播功能，但并未详细说明如何在一个轮播中展示多个项目。那么，如何才能在 Bootstrap 4 中实现一个一次显示多个项目的轮播呢？

实际上，Bootstrap 4 的默认轮播组件一次只能显示一个项目，但我们可以通过在单个轮播项目中嵌入多个元素来达到类似的效果。例如，可以在一个 .item 类中包含多个 .col-xs-4 类，每个 .col-xs-4 类内包含不同的内容，这样就能在一个轮播项目中展示多个内容块。

      {content}       {content}       {content} 

然而，这种方法存在一个问题：Bootstrap 的默认轮播功能并不能一次推进多个项目，这意味着用户每次点击下一项时，轮播只能切换到下一个 .item，而不是推进到下一个 .col-xs-4。如果你希望实现一次推进一个项目（即 .col-xs-4）的效果，Bootstrap 4 本身并不能满足这个需求。

在这种情况下，建议考虑使用其他轮播库。Slick.JS 是一个非常出色的选择，它不仅轻量级（约5k min’d 和 gzipped），而且功能强大，非常适合多种轮播配置需求。如果你仍然坚持使用 Bootstrap，可以尝试使用一些自定义脚本来实现单项或多项推进的效果。例如，有一个在线示例展示了如何在 Bootstrap 4 中实现这种功能，你可以参考这个示例来进行修改和使用。