自适应轮播需三要素协同：容器用max-width: 100%而非固定像素；图片设width: 100%和height: auto保比例；JS轮播须实时获取宽度而非缓存offsetWidth。
轮播图容器必须用百分比或 max-width，不能写死 width: 800px
写死像素宽度是自适应失败最常见原因。浏览器窗口缩小时， 正确做法是让容器「随父级伸缩」： 即使容器自适应了，图片仍可能按原始尺寸渲染，导致错位、拉伸或留白。 关键样式只有两条： 立即学习“前端免费学习笔记（深入）”； 注意： 很多老教程用 解决方案分两种场景： 加了 真正该阻止的是页面滚动干扰轮播，不是所有事件： 另外，记得给轮播容器加 自适应轮播最难的不是写法，而是「宽度来源是否可靠」：CSS 层面靠 width: 1200px，就会横向溢出或触发滚动条。
width: 100% 或 max-width: 100%（推荐后者，更安全）min-width 硬限制（除非你明确需要最小宽度） 或 ）本身也支持流式布局
img 标签必须加 width: 100% 和 height: auto
img.carousel-item {
width: 100%;
height: auto;
}height: auto 不能省——它保证宽高比不变；如果写成 height: 100%，图片会被强制拉伸变形。JS 轮播逻辑里别读
offsetWidth 做固定像素计算element.offsetWidth 获取轮播项宽度，再乘以索引算偏移量。这在响应式下会立刻失效：窗口缩放后，offsetWidth 变了，但 JS 缓存的旧值没更新，导致跳帧或卡死。
transform: translateX(-50%) + transition，靠 scrollLeft 或 getBoundingClientRect() 动态读取当前宽度item.getBoundingClientRect().width，而不是初始化时只读一次ResizeObserver 监听容器变化，自动重置轮播状态移动端触摸滑动要防默认行为，但别误禁
click
touchstart 后常有人直接写 e.preventDefault()，结果导致按钮点击失效、链接打不开。carousel.addEventListener('touchstart', e => {
// 只在水平滑动意图明显时阻止默认行为
if (Math.abs(e.touches[0].clientX - startX) > 10) {
e.preventDefault(); // 防止页面跟着拖拽滚动
}
});user-select: none，避免长按唤起文字选中菜单。max-width 和 width: 100%，JS 层面靠实时测量而非缓存，图片层靠 height: auto 保比例——三者缺一不可。
