我正在尝试在新的Web项目中使用bootstrap 4.1。在项目的主页上,我想向用户展示一个带有多个html分隔符的轮播。
当用户单击上一个/下一个按钮时,轮播会将一个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>
但是,上面的代码有两个问题
如何配置引导程序的轮播以在单击时一次显示3张卡并一次滑动一张卡?