小白教程
所有教程
关于
Search
172.69.6.28
172.69.6.28
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Bootstrap5 轮播”的源代码
本页内容
上一节:
Bootstrap5_导航栏
下一节:
Bootstrap5_模态框
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:Bootstrap5 轮播}}[[Category:Bootstrap 5 教程|23]] = Bootstrap5 轮播 = 轮播是一个循环的幻灯片: == 如何创建轮播 == 以下实例创建了一个简单的图片轮播效果 : <sample title="" desc="" lang="html" run="1"> <!-- 轮播 --> <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="/image.php?w=300&h=300" class="d-block" style="width:100%"> </div> <div class="carousel-item"> <img src="/image.php?w=300&h=300" class="d-block" style="width:100%"> </div> <div class="carousel-item"> <img src="/image.php?w=300&h=300" 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> </sample> <run name="1"> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <!-- 轮播 --> <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="/image.php?w=300&h=300" class="d-block" style="width:100%"> </div> <div class="carousel-item"> <img src="/image.php?w=300&h=300" class="d-block" style="width:100%"> </div> <div class="carousel-item"> <img src="/image.php?w=300&h=300" 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> </body> </html> </run> == 轮播图片上添加描述 == 在每个 <div class="carousel-item"> 内添加 <div class="carousel-caption"> 来设置轮播图片的描述文本:: <sample title="" desc="" lang="html" run="2"> <div class="carousel-item"> <img src="https://static.xiaobai.wang/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%"> <div class="carousel-caption"> <h3>第一张图片描述标题</h3> <p>第一张图片描述内容显示在这里!!!</p> </div> </div> </sample> <run name="2"> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <!-- Carousel --> <div id="demo" class="carousel slide" data-bs-ride="carousel"> <!-- Indicators/dots --> <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> <!-- The slideshow/carousel --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="/image.php?w=300&h=300" class="d-block" style="width:100%"> <div class="carousel-caption"> <h3>第一张图片描述标题</h3> <p>第一张图片描述内容显示在这里!!!</p> </div> </div> <div class="carousel-item"> <img src="/image.php?w=300&h=300" class="d-block" style="width:100%"> <div class="carousel-caption"> <h3>第二张图片描述标题</h3> <p>第二张图片描述内容显示在这里!!!</p> </div> </div> <div class="carousel-item"> <img src="/image.php?w=300&h=300" class="d-block" style="width:100%"> <div class="carousel-caption"> <h3>第三张图片描述标题</h3> <p>第三张图片描述内容显示在这里!!!</p> </div> </div> </div> <!-- Left and right controls/icons --> <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> </body> </html> </run> === 以上实例中使用的类说明 === {| class="table table-striped table-hover" ! 类 ! 描述 |- | <code>.carousel</code> | 创建一个轮播 |- | <code>.carousel-indicators</code> | 为轮播添加一个指示符,就是轮播图底下的一个个小点,轮播的过程可以显示目前是第几张图。 |- | <code>.carousel-inner</code> | 添加要切换的图片 |- | <code>.carousel-item</code> | 指定每个图片的内容 |- | <code>.carousel-control-prev</code> | 添加左侧的按钮,点击会返回上一张。 |- | <code>.carousel-control-next</code> | 添加右侧按钮,点击会切换到下一张。 |- | <code>.carousel-control-prev-icon</code> | 与 .carousel-control-prev 一起使用,设置左侧的按钮 |- | <code>.carousel-control-next-icon</code> | 与 .carousel-control-next 一起使用,设置右侧的按钮 |- | <code>.slide</code> | 切换图片的过渡和动画效果,如果你不需要这样的效果,可以删除这个类。 |}
返回至“
Bootstrap5 轮播
”。
上一节:
Bootstrap5_导航栏
下一节:
Bootstrap5_模态框