在单个页面上添加多个bootstrap 4轮播 [英] Add multiple bootstrap 4 carousel on a single page

问题描述

我在使用新的引导程序4时遇到了麻烦，有谁知道如何在单个页面中添加/插入多个引导程序转盘.

I'm having a trouble in using the new bootstrap 4, do anyone of you know how to add/insert multiple bootstrap carousel in one single page.

我搜索了许多站点，但是它们仅使用引导程序3给出答案.预先感谢您的帮助！

I've search many sites but they only give answers using bootstrap 3. thank you in advance for your help!

推荐答案

演示页面本身使用多个轮播.除了为每个轮播定义唯一的ID之外，您无需做其他任何事情.

The demo page itself uses multiple carousels. There's nothing special you have to do except define each carousel with a unique id.

这是来自文档:
请确保在.carousel上为可选控件设置唯一的ID，尤其是如果您在单个页面上使用多个旋转木马时."

https://v4-alpha.getbootstrap.com/components/carousel/

<div id="thisShouldBeUniquePerCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Third slide">
    </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>

这篇关于在单个页面上添加多个bootstrap 4轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！