带有基于视口（屏幕尺寸）的卡片的 Bootstrap 5+ 轮播

Question

我已经为此搜索了很长时间，但不幸的是，所有问题/答案大多是 6/8 岁。既然 Bootstrap 已经发展了这么多，我想问这个问题，因为也许有人知道如何做到这一点。

我的要求是有一个基于视口适应的卡片轮播，例如：

• 默认大小：3 件
• 手机尺寸：仅 1 件

这个 sn-p 非常适合我的需求：https://gosnippets.com/snippets/bootstrap-carousel-with-cards-in-3-columns，但是我无法实现我想要的。

我也玩过Slick carousel，但坦率地说，我不是粉丝。它完全符合我的需要，但它已经过时、有问题，我会更乐意只使用引导程序。

我的项目使用 Webpack，因此如果有帮助，我可以使用 SCSS。

请告诉我是否可以使用简单的 Bootstrap 5 实现我想要的。

Answer 1

您可以通过调用两个轮播在简单的引导程序中执行此操作。这是以下代码，希望您能理解代码模式。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner d-none d-sm-block"> //d-none: display none for all devices, d-sm-block: hide on screens smaller than sm (width < 768px)
        //loops start
        <div class="carousel-item active">
            <div class="container">
                <div class="row">
                  <div class="col-sm">
                    <img src="..." class="d-block w-100" alt="...">
                  </div>
                  <div class="col-sm">
                    <img src="..." class="d-block w-100" alt="...">
                  </div>
                  <div class="col-sm">
                    <img src="..." class="d-block w-100" alt="...">
                  </div>
                </div>
              </div>
        </div>
        //loops end
      </div>
    <div class="carousel-inner d-sm-none">//d-sm-none: hide on sm (width < 768px) and wider screens
      <div class="carousel-item active">
          <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

祝你好运。