首页 Bootstrap5组件手册

<div id="lunbo" class="carousel slide" data-bs-ride="carousel">
基础类
.carousel     轮播框

组合类：
.slide        过度动画，平滑切换图

属性：
id            轮播框ID

自定义属性：
data-bs-ride="carousel"    自动轮播

==============================================================
<!-- 可选，底部，指示点 -->
<div class="carousel-indicators">
  <button data-bs-target="#lunbo" data-bs-slide-to="0" class="active"></button>
  <button data-bs-target="#lunbo" data-bs-slide-to="1"></button>
</div>

<div>
基础类：
.carousel-indicators        指示点

<button>
基础类：
.acrive                    选中，高亮（一般第一张图加后面的不要加）

自定义属性：
data-bs-target="#lunbo"    关联轮播框ID
data-bs-slide-to="0"       对应图片编号


===========================================================
<!-- 可选，左右控制图标 -->
<button class="carousel-control-prev" data-bs-target="#lunbo" data-bs-slide="prev">
  <span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" data-bs-target="#lunbo" data-bs-slide="next">
  <span class="carousel-control-next-icon"></span>
</button>

<button>
基础类：（单选）
carousel-control-prev      左按钮
carousel-control-next      右按钮

自定义属性：
data-bs-target="#lunbo"    关联轮播框ID

自定义属性：（单选）
data-bs-slide="prev"       关联左箭头
data-bs-slide="next"       关联右箭头

内嵌<span>
carousel-control-next-icon   箭头图标


========================================================
<!-- 轮播图 -->
<div class="carousel-inner">
  <div class="carousel-item active">
    <img src="tu1.png" style="width:100%">
    <div class="carousel-caption">  <!--可选-->
      <h3>图1标题</h3>
      <p>图1内容。。。。。。</p>
    </div>
  </div>
</div>

注：
1.固定的
2.<div class="carousel-caption">不显示内容，可取消
3.active 一般都时第一张图片上加，后面的图不要加

<div id="lunbo" class="carousel slide" data-bs-ride="carousel">
  <!-- 可选，底部，指示点 -->
  <div class="carousel-indicators">
    <button data-bs-target="#lunbo" data-bs-slide-to="0" class="active"></button>
    <button data-bs-target="#lunbo" data-bs-slide-to="1"></button>
  </div>
  
  <!-- 可选，左右控制图标 -->
  <button class="carousel-control-prev" data-bs-target="#lunbo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" data-bs-target="#lunbo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
  
  
  <!-- 轮播图 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="tu1.png" style="width:100%">
      <div class="carousel-caption">  <!--可选-->
        <h3>图1标题</h3>
        <p>图1内容。。。。。。</p>
      </div>
    </div>
    
    <div class="carousel-item">
      <img src="tu2.png" style="width:100%">
      <div class="carousel-caption">  <!--可选-->
        <h3>图2标题</h3>
        <p>图2内容。。。。。。</p>
      </div> 
    </div>
  </div>
</div>