如何使用Bootstrap 4.1创建具有多个卡/分隔器的轮播?

时间:2018-10-29 21:54:36

标签: jquery css twitter-bootstrap bootstrap-4

我正在尝试在新的Web项目中使用bootstrap 4.1。在项目的主页上,我想向用户展示一个带有多个html分隔符的轮播。

最终结果应如下图所示 enter image description here

当用户单击上一个/下一个按钮时,轮播会将一个HTML分隔符向相应的方向前进。

我发现了slick-carousel插件,它似乎完全可以满足我的需求。但是,我很想在我的项目中添加另一个库。为了避免添加另一个库,我希望能够利用Bootstrap 4.1自己的Carousel获得类似的结果。

code snippet found in this link展示了slick-carousel插件的运行情况,该插件配置为希望轮播在我的网站上的行为。

如何配置拥有旋转木马的twitter-bootstrap 4.1做同样的事情

我尝试将Bootstrap的轮播配置为遵循https://www.codeply.com/go/gF4VnWfIAW

<div class="jumbotron bg-primary">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item text-center active">

            <div class="card" style="width: 18rem;">
              <div class="card-body">
                <h5 class="card-title">First</h5>
                <p class="card-text">First Block</p>
              </div>
            </div>

        </div>
        <div class="carousel-item text-center">


            <div class="card" style="width: 18rem;">
              <div class="card-body">
                <h5 class="card-title">Second</h5>
                <p class="card-text">Second Block</p>
              </div>
            </div>

       </div>
        <div class="carousel-item text-center">


            <div class="card" style="width: 18rem;">
              <div class="card-body">
                <h5 class="card-title">Third</h5>
                <p class="card-text">Third Block</p>
              </div>
            </div>

        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</div>

但是,上面的代码有两个问题

  1. 一次只显示一个方块/卡片。我想同时显示3个区块,每次每次移动一个区块。
  2. 自动播放,这是我不想要的。当用户单击上一个/下一个按钮时,我想移动一个块。

如何配置引导程序的轮播以在单击时一次显示3张卡并一次滑动一张卡?

0 个答案:

没有答案