Bootstrap5 轮播

轮播/幻灯片

轮播是循环播放元素的幻灯片：

如何创建轮播

以下示例展示了如何创建带有指示器和控件的基本轮播：

示例

<div id="demo" class="carousel slide" data-bs-ride="carousel">


<div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>


<div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block w-100">
    </div>
</div>


<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
</button>
</div>

亲自试一试 »

示例解释

上面示例中每个类的作用的描述：

Class	Description
`.carousel`	Creates a carousel
`.carousel-indicators`	Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing)
`.carousel-inner`	Adds slides to the carousel
`.carousel-item`	Specifies the content of each slide
`.carousel-control-prev`	Adds a left (previous) button to the carousel, which allows the user to go back between the slides
`.carousel-control-next`	Adds a right (next) button to the carousel, which allows the user to go forward between the slides
`.carousel-control-prev-icon`	Used together with .carousel-control-prev to create a "previous" button
`.carousel-control-next-icon`	Used together with .carousel-control-next to create a "next" button
`.slide`	Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect

向幻灯片添加标题

洛杉矶

我们在洛杉矶度过了一段美好的时光！

芝加哥

谢谢你，芝加哥！

纽约

我们爱大苹果！

在里面添加元素<div class="carousel-caption">每个内<div class="carousel-item">为每张幻灯片创建标题：

示例

<div class="carousel-item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>

亲自试一试 »