Bootstrap4 轮播

轮播是一个循环的幻灯片：

如何创建轮播

以下实例创建了一个简单的图片轮播效果 ：

实例

<divid="demo"class="carousel slide"data-ride="carousel"><!-- 指示符--><ulclass="carousel-indicators"><lidata-target="#demo"data-slide-to="0"class="active"></li><lidata-target="#demo"data-slide-to="1"></li><lidata-target="#demo"data-slide-to="2"></li></ul><!-- 轮播图片--><divclass="carousel-inner"><divclass="carousel-item active"><imgsrc="https://static.runoob.com/images/mix/img_fjords_wide.jpg"></div><divclass="carousel-item"><imgsrc="https://static.runoob.com/images/mix/img_nature_wide.jpg"></div><divclass="carousel-item"><imgsrc="https://static.runoob.com/images/mix/img_mountains_wide.jpg"></div></div><!-- 左右切换按钮--><aclass="carousel-control-prev"href="#demo"data-slide="prev"><spanclass="carousel-control-prev-icon"></span></a><aclass="carousel-control-next"href="#demo"data-slide="next"><spanclass="carousel-control-next-icon"></span></a></div>

尝试一下 »

轮播图片上添加描述

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

实例

<divclass="carousel-item"><imgsrc="https://static.runoob.com/images/mix/img_fjords_wide.jpg"><divclass="carousel-caption"><h3>第一张图片描述标题</h3><p>描述文字!</p></div></div>

尝试一下 »