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

查看：33
本文介绍了在单个页面上添加多个 bootstrap 4 carousel的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在使用新的 bootstrap 4 时遇到了问题，你们知道如何在一个页面中添加/插入多个 bootstrap carousel.

我搜索了很多网站，但他们只使用引导程序 3 给出答案.预先感谢您的帮助！

解决方案

演示页面本身使用多个轮播.除了用唯一的 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="第一张幻灯片">

<div class="carousel-item"><img class="d-block img-fluid" src="..." alt="第二张幻灯片">

<div class="carousel-item"><img class="d-block img-fluid" src="..." alt="第三张幻灯片">

<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">以前的</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">下一步</span></a>

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.

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

解决方案

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

This is from the docs:
"Be sure to set a unique id on the .carousel for optional controls, especially if you’re using multiple carousels on a single page."

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 carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆