按钮应紧贴幻灯片内容边缘（左/右各留16px），垂直居中，确保44×44px点击热区；键盘焦点顺序为prev→内容→next；禁用状态须用disabled属性+aria-disabled="true"，不可仅靠视觉灰显。
按钮位置该放哪？别默认塞在底部居中
幻灯片按钮放错位置，用户第一眼找不到、手指点不到、键盘 Tab 顺序混乱——这比样式丑更致命。真实场景里，左右箭头必须紧贴内容边缘，且留出足够点击热区（至少 44×44px），尤其在触屏设备上。
常见错误现象：margin: 0 auto 把按钮居中堆在底部，结果用户滑动后要反复上下找；或用 position: absolute 但没设 bottom: 20px，导致按钮被内容遮挡或随滚动消失。
- 推荐方案：给幻灯片容器设
position: relative，左右按钮分别用position: absolute+top: 50%+transform: translateY(-50%)垂直居中，左按钮加left: 16px，右按钮加right: 16px - 移动端必须加
touch-action: manipulation，避免 Safari 拦截快速连点 - 键盘焦点顺序要匹配视觉顺序：先
prev，再内容区，最后next；用tabindex="0"显式声明可聚焦，别依赖 DOM 顺序碰运气
按钮样式怎么写才不“假”？避开纯 CSS 圆角+阴影陷阱
太多人用 border-radius: 50% + box-shadow 做“现代感”箭头按钮，结果在深色背景上看不见、高对比度模式下失焦、打印时糊成一团——这不是设计，是埋雷。
真正可用的按钮样式，核心是「识别性＞装饰性」：箭头符号必须语义清晰、尺寸足够、颜色与背景有明确对比度（至少 4.5:1）。
- 图标优先用 SVG 内联，而不是字体图标（如
←或第三方 icon font），避免加载失败后只剩空白方块 - 禁用
outline: none—— 如果你删了默认焦点框，必须用box-shadow: 0 0 0 3px #007bff等替代，否则键盘用户直接失联 - 悬停/激活态别只改背景色：加
scale: 1.05微动 +transition: all 0.15s ease，但动画时长不能超过 0.2s，否则拖慢感知速度
为什么点击按钮没反应？检查这三个 JS 绑定盲区
按钮 HTML 写得再漂亮，JS 绑定错了照样白搭。最常踩的坑不是逻辑写错，而是事件监听时机、作用域和 this 指向全乱套。
常见错误现象：document.getElementById('next').onclick = goToNext 在 DOM 加载前执行，结果 getElementById 返回 null；或用箭头函数绑定却忘了箭头函数不绑定 this，导致内部调用 this.currentSlide 报 undefined。
- 确保 JS 执行在
DOMContentLoaded之后，或把脚本放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
