从引导网格列到轮播

Posted 2023-03-21

【中文标题】从引导网格列到轮播

【英文标题】：From bootstrap Grid columns to carousel

【发布时间】：2019-12-21 06:41:16

【问题描述】：

这就是我希望实现的目标。

我目前有一个显示 1 行和 4 列的引导网格。 在桌面设备上，4 列彼此相邻出现 在平板电脑上，它们显示在 2 x 2 网格中，而在移动设备中，它们显示为 4 行 1 列。

是否有可能在平板电脑或移动设备上设置一个轮播，让我可以在 4 列之间滑动？那么当在平板电脑中有 2 张幻灯片时，每张幻灯片中有两列，而在移动设备中有 4 张幻灯片，每张幻灯片中有 1 列？

这是我当前的网格代码。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="how container">
  <div class="title">SUBSCRIBE IN JUST 4 EASY STEPS</div>
  <div class="row no-gutters">
    <div class="col text-center">
      <img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
      <span>SIGN UP</span>
    </div>
    <div class="col text-center">
      <img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
      <span>SELECT AGE GROUP</span>
    </div>
    <div class="w-100 d-block d-lg-none"></div>
    <div class="col text-center">
      <img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
      <span>CHOOSE A SUBSCRIPTION PLAN</span>
    </div>
    <div class="col text-center">
      <img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
      <span>HAVE FUN</span>
    </div>
  </div>
  <div class="row text-center pt-3">
    <div class="col">
      <button type="button" class="btn btn-dark btn-lg">GET STARTED</button>
    </div>
  </div>
</div>

【参考方案1】：

如果 Bootstrap 是您被允许使用的唯一库，我想您将不得不有重复的内容并在轮播的不同断点上显示/隐藏其中一个或只是常规 4-栏目内容。

如果不是这样，我强烈建议您使用OwlCarousel！那里有你要找的一切。

html

<div class="how container">
    <h4 class="title">
        SUBSCRIBE IN JUST 4 EASY STEPS
    </h4>
    <div class="owl-carousel owl-theme">
        <div class="item">
            <figure class="figure">
                <img src="https://loremflickr.com/600/200?random=1" 
                    class="figure-img img-fluid w-100" />
                <figcaption class="figure-caption">
                    SIGN UP
                </figcaption>
            </figure>
        </div>
        <div class="item">...</div>
        <div class="item">...</div>
        <div class="item">...</div>
    </div>
</div>

如您所见，基本上您只需要一个带有类.owl-theme 的包装器，该类包装.items 的集合。在每个项目中，您可以拥有任何您想要的内容。在这里，我只是演示了在每个项目中都有一个<figure />。

javascript

确保您首先加载了jQuery，然后是 OwlCarousel 的 javascript 文件，然后是 2 个样式文件：1 个核心 css 和 1 个主题。安装细节记录在here。

$(function() 
    $('.owl-carousel').owlCarousel(
        loop: false,
        margin: 0,
        nav: false,
        responsive:
            0:
                items:1
            ,
            768:
                items:2
            ,
            992:
                items:4
            
        
    );
);

请参阅，在响应选项中，您可以在此处定义每个断点所需的项目数。更多信息来自他们的文档站点here！

结果

演示： https://jsfiddle.net/davidliang2008/mvn3k08u/22/

【讨论】：

感谢您提供如此好的答案。效果很好