轮播 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 示例