轮播 Carousel

轮播是一个幻灯片展示组件,通过一系列图片、文本或自定义 markup 循环播放,支持指示器、前后控制按钮、自动播放与淡入过渡。

基础轮播

带指示器与左右控制按钮的完整轮播;data-bs-ride="carousel" 让页面加载后自动播放,鼠标悬停时暂停。幻灯片用色块代替图片。

HTML 示例

淡入过渡

在轮播容器上加 carousel-fade,切换动画从滑动变为交叉淡入淡出。

HTML 示例

深色变体

加 carousel-dark 得到深色控件与指示器(本示例用浅色幻灯片衬托)。注意:该类自 v5.3.0 起已弃用,新项目推荐改用 data-bs-theme="dark"。

HTML 示例

带标题说明

在 carousel-item 内放 carousel-caption 为幻灯片加文字说明;用 d-none d-md-block 在小屏隐藏标题,避免拥挤。

HTML 示例