轮播图宽度自适应本质是宽度基准是否随容器实时更新：需每次切换前重读getboundingclientrect().width、用resizeobserver监听容器变化、解耦图片与容器宽高设置，并避免混用vw与容器相对单位。
轮播图的宽度自适应问题，本质不是“怎么让图片变宽”，而是「宽度基准是否随容器实时更新」。缓存初始宽度、忽略 ResizeObserver、滥用 vw 单位，是导致自适应失效的三大主因。
为什么 getBoundingClientRect().width 不能只调用一次
很多实现会在初始化时读取一次 item.getBoundingClientRect().width，然后用这个值计算偏移量。但容器可能被 CSS 媒体查询缩放、被父级 flex/gird 挤压、或在用户缩放页面后失准。
- 每次切换前必须重新获取：尤其是用户旋转手机、分屏窗口、或触发浏览器缩放（Ctrl + / -）后
- 不要依赖
offsetWidth：它在某些 CSS transform 场景下返回 0 或旧值 - 如果使用
transform: translateX()移动，偏移量必须基于当前容器宽度，而非初始宽度
ResizeObserver 是唯一可靠的重算触发器
监听 window.resize 事件早已不够用——它不响应 CSS 容器查询变化、也不捕获 flex 子项重排。现代轮播必须用 ResizeObserver 监听轮播容器本身。
- 注册时传入轮播最外层容器（如
carousel-container），不是body或window - 回调中应重置当前索引、重读宽度、并强制刷新视图（例如设置
translateX(0)后再跳转到当前项） - 注意兼容性：IE 不支持，需 fallback 到
window.addEventListener('resize', ...)+ 节流
图片和容器的 width/height 必须解耦
常见错误是给 img 设 width: 100%; height: 100%，却没约束父容器高度来源。结果小屏下图片被拉伸，大屏下留白。
-
.carousel-item高度建议设为aspect-ratio: 16/9（现代浏览器）或用 padding-bottom 技巧（兼容旧版） -
img必须加object-fit: cover（填满不拉伸）或contain（完整显示），禁用height: auto的模糊行为 - 避免对
img直接设width: 100vw：它会突破容器边界，导致横向滚动条
移动端 touchstart 的 preventDefault 很容易误伤
加了 touchstart 就直接 e.preventDefault()，会导致所有点击失效——按钮点不了、链接打不开、表单无法聚焦。
- 只在明确检测到水平滑动意图时阻止：
Math.abs(e.touches[0].clientX - startX) > 10 - 记得记录
startX在touchstart里，别在touchmove才记 - 给轮播容器加
user-select: none，防止长按唤出文字选中菜单干扰操作
最常被忽略的一点：自适应轮播的「宽度来源」必须统一。CSS 层用 width: 100%，JS 层就只能读 getBoundingClientRect().width；若用了 vw，JS 就得同步用 window.innerWidth ——混用必然错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
