Question

这就是我希望完成的事情。

我目前有一个显示1行和4列的引导网格。在台式机设备上，四列相邻显示在平板电脑上，它们以2 x 2网格显示，在移动设备上，它们以1列显示4行。

是否有可能在平板电脑或移动设备上安装旋转木马，以便在四列之间滑动？这样，在Tablet中有2张幻灯片，每张幻灯片中有两列，而在Mobile中有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/

从引导网格列到轮播

1 个答案:

HTML

JavaScript

结果