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

decoding
=
"
async
"

src
=
"
https://static.IDC.NET/images/mix/img_fjords_wide.jpg
"

class
=
"
d-block
"

style
=
"
width:100%
"
>

</
div
>

<
div

class
=
"
carousel-item
"
>

<
img

decoding
=
"
async
"

src
=
"
https://static.IDC.NET/images/mix/img_nature_wide.jpg
"

class
=
"
d-block
"

style
=
"
width:100%
"
>

</
div
>

<
div

class
=
"
carousel-item
"
>

<
img

decoding
=
"
async
"

src
=
"
https://static.IDC.NET/images/mix/img_mountains_wide.jpg
"

class
=
"
d-block
"

style
=
"
width: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
>

尝试一下 »

轮播图片上添加描述

在每个 <div class="carousel-item"> 内添加 <div class="carousel-caption"> 来设置轮播图片的描述文本：:

实例

<
div

class
=
"
carousel-item
"
>

<
img

decoding
=
"
async
"

src
=
"
https://static.IDC.NET/images/mix/img_fjords_wide.jpg
"

class
=
"
d-block
"

style
=
"
width:100%
"
>

<
div

class
=
"
carousel-caption
"
>

<
h3
>
第一张图片描述标题
</
h3
>

<
p
>
第一张图片描述内容显示在这里！！！
</
p
>

</
div
>

</
div
>

尝试一下 »

以上实例中使用的类说明