javascript - 从引导网格列到轮播

Question

所以这就是我希望完成的。

我目前有一个显示 1 行和 4 列的 bootstrap 网格。在桌面设备上，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>

Answer 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 的包装器包装了 .item 的集合秒。在每个元素中，您可以拥有任何您想要的内容。在这里我只是展示了一个 <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/