全屏轮播需设 height: 100vh 于 .carousel 或 .carousel-inner，禁用 .carousel-item 单独设高；背景图应设在 .carousel-item 上，禁用 img 标签；自动播放失效多因 data-bs-interval 错误或容器不可见；移动端卡顿可关闭 touch 支持或换用 Swiper。
全屏轮播必须设 height: 100vh，否则只撑开内容高度
Bootstrap 的 carousel 默认按内部图片或内容高度自适应，不会自动占满视口。常见现象是轮播区域只有一两百像素高，背景图被裁成一条细缝。
解决方法很简单：给外层 .carousel 或其直接子容器（如 .carousel-inner）加 height: 100vh，并确保父级没设置 overflow: hidden 或固定高度干扰。
- 别只给
.carousel-item设height: 100vh—— 它默认是position: absolute，脱离文档流，父容器仍无高度 - 如果用了 Bootstrap 5.3+，
.carousel默认带overflow: hidden，不影响，但若手动加了max-height就会截断 - 移动端 Safari 对
100vh有兼容问题（地址栏收放时高度跳变），可临时用min-height: 100vh+height: 100%组合兜底
背景图要写在 .carousel-item 而不是 img 标签里
直接在 <img> 标签里放图，既难控制铺满效果，又无法实现 CSS 背景的 object-fit 或 background-size 行为；更关键的是，<img> 在轮播切换时会有加载闪烁、拉伸失真。
正确做法是把图作为 .carousel-item 的背景，用 background-image 控制。
- HTML 中删掉
<img>，改用空<div class="carousel-item"></div> - CSS 中写：
.carousel-item { background-image: url('...'); background-size: cover; background-position: center; } - 如果需支持暗色模式或动态换图，用
data-bg属性 + JS 切换style.backgroundImage，比反复操作 DOM 更轻量
自动播放失效？检查 data-bs-interval 和 visibility 状态
轮播不自动滚动，90% 是因为 data-bs-interval 被设为 0 或 false，或者页面初始化时轮播容器不可见（比如在 Tab 面板里、模态框中未打开时就渲染了）。
Bootstrap 5 的轮播依赖 IntersectionObserver 或定时器触发，若元素 display: none 或 visibility: hidden，计时器会被暂停。
- 确认 HTML 属性是
data-bs-interval="5000"（不是data-interval，旧版写法在 v5+ 已失效） - 如果轮播初始藏在
display: none区域（如未激活的 Tab），得等显示后再手动调用myCarousel.carousel('cycle') - 页面从后台切回前台时，Chrome 会节流
setInterval，可监听visibilitychange事件主动恢复轮播
移动端滑动卡顿？关掉 carousel 的 touch 支持或换方案
Bootstrap 自带的 touch 拖拽在部分安卓机型上响应迟钝，尤其配合背景图和过渡动画时，容易出现“拖不动”“松手后不翻页”“翻页错位”等问题。
这不是 bug，而是它用 touchstart/touchmove + 手动计算位移，在低端设备上帧率不足。
- 最稳方案：加
data-bs-touch="false"关闭触摸支持，只保留左右按钮和自动轮播 - 若必须支持滑动，建议用
swiper.js替代，它对 touch 处理更成熟，且与 Bootstrap 样式不冲突 - 避免在
.carousel-item上叠加过多 CSS 动画（如transform: scale()），GPU 加速不充分时会加重卡顿
全屏轮播真正难的不是“怎么让它变大”，而是“怎么让它在各种设备、各种嵌套场景下稳定撑满且不闪不卡”。尤其是 background-image 的加载时机、visibility 状态变化、以及 touch 交互的底层兼容性，这几个点一漏，调试起来就容易绕半天。
