原生轮播图需确保边界检查、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 已就绪：把脚本放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
