原生轮播图需确保边界检查、DOM状态同步、事件绑定正确、动态计算滑动位置、处理移动端touch事件及清理自动轮播定时器。
直接用原生 HTML + CSS + JS 就能做出稳定、可维护的带左右按钮轮播图，不需要任何框架。关键不是“怎么加两个箭头”，而是按钮如何真正驱动状态更新、避免越界、同步视觉与数据。
button 点击后索引越界导致 Cannot read property 'src' of undefined
这是最常发生的报错，根源是没做边界检查：点“下一张”到最后一张后还继续 currentIdx++，数组越界取值就崩了。
- 右按钮逻辑必须判断：
if (currentIdx === slides.length - 1) { currentIdx = 0; }（循环切换）或if (currentIdx （停在末尾） - 左按钮同理：
if (currentIdx === 0) { currentIdx = slides.length - 1; }或if (currentIdx > 0) { currentIdx--; } - 切换前先移除所有
.active类，再给目标元素加上——否则 DOM 状态和 JS 索引脱节，后续点击全乱
按钮绑定无效：click 事件不触发或只生效一次
现象是按钮看着在页面上，但点不动；或者第一次有效，之后再点没反应。大概率是 DOM 查询失败或监听器重复绑定。
- 确保 JS 执行时 DOM 已就绪：把脚本放在
</body>前，或包裹在document.addEventListener('DOMContentLoaded', ...)中 - 检查选择器是否写错，比如
document.querySelector('.next-btn')却实际 class 是next，返回null后.addEventListener静默失败 - 避免多次调用初始化函数（如在 Vue 的
mounted或 React 的useEffect里没加依赖项控制），导致同一个按钮绑了 3 次 click，点一下触发 3 次切换
滑动对齐不准：点一次按钮，图片停在中间或偏移
这不是动画问题，而是目标位置计算错误。尤其当卡片有 margin、gap 或响应式宽度变化时，硬写死 scrollLeft += 800 必然错位。
立即学习“前端免费学习笔记（深入）”；
- 用
slides[0].getBoundingClientRect().width动态读取第一张图的可视宽度（含 padding/border，不含 margin） - 如果容器用了
gap，需额外加一个子元素测距，或改用container.children[i].offsetLeft算累计偏移 - 优先用
container.scrollTo({ left: targetPos, behavior: 'smooth' })替代直接赋值scrollLeft，它支持取消、兼容性更好，且不会被scroll-behavior: smooth干扰 - 记得给容器设
overflow-x: auto且禁用scroll-behavior: smooth，否则 JS 控制会卡顿或延迟
移动端 touch 事件失效或误触
在手机上点一次没反应，或滑一下切好几张——本质是浏览器默认行为没处理，或手势阈值没设。
- 给轮播容器加
touch-action: pan-y（允许纵向滚动）或touch-action: none（完全接管），防止 iOS/Android 抢走touchstart -
touchstart回调里立刻调用event.preventDefault()，但仅限容器内无链接、表单等需默认行为的场景 - 记录
touchstart.clientX，在touchend时再读一次，差值绝对值 50px 再按方向触发nextSlide()或prevSlide()
最容易被忽略的是：按钮点击后，自动轮播定时器没清理。用户手动切到第 3 张，自动轮播还在倒数第 2 张的计时，下一秒又跳走——这得在每个按钮回调里先 clearInterval(autoTimer)，再重置索引，最后重启定时器。状态不同步，比功能不全更伤体验。
