最省事是直接用 Swiper v11+，原生支持无限循环、自动播放和渐变过渡；需严格遵循 HTML 结构、语义化标签、禁用 cssMode 并配置 touchStartPreventDefault:false，同时优化键盘导航与焦点管理。
用 Swiper 实现响应式客户评价轮播最省事
直接上 Swiper（v11+），它原生支持无限循环、自动播放、键盘/鼠标控制，且对评价类轮播的“单条展示+渐变过渡”场景适配度高。别自己手写 setInterval + transform，容易在 Safari 上卡顿、在移动端失焦。
关键点：
- 加载
swiper-bundle.min.css和swiper-bundle.min.js（CDN 可用https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css） - HTML 结构必须是
<div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide">...</div></div></div>，少一层或类名错一个字母都无效 - 初始化时加
loop: true和effect: 'fade'，避免切换时出现空白帧
const swiper = new Swiper('.swiper', {
loop: true,
effect: 'fade',
autoplay: { delay: 5000 },
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
评价卡片 HTML 结构要严格遵循语义化与可访问性
每张评价卡片不是随便堆 <div>，得让屏幕阅读器能读出“这是某人对某产品的评价”，否则 SEO 和无障碍都丢分。
正确写法：
立即学习“前端免费学习笔记（深入）”；
- 外层用
<article role="region" aria-label="客户评价第2条"> - 头像用
<img src="..." alt="张伟的头像">，不能只留空alt="" - 星级用
<div aria-hidden="true">★★★★☆</div><span class="visually-hidden">4星，满分5星</span>，兼顾视觉和读屏 - 评价文字包裹在
<p>里，别用<div>模拟段落
移动端滑动失效？检查 touchStartPreventDefault 和 cssMode
常见现象：iOS 上手指一划就触发页面滚动，轮播不动；安卓部分机型点导航按钮没反应。
根本原因是默认行为冲突。解决方案：
- 加
touchStartPreventDefault: false，允许 touchstart 不阻止默认行为（否则 iOS Safari 会吞掉滑动手势） - 禁用
cssMode: true（这个模式仅适合纯 CSS 动画轮播，但评价轮播需要 JS 控制进度条和状态，开了反而失效） - 确保父容器没有
overflow: hidden或touch-action: none—— 这两个 CSS 规则会直接封杀所有触摸事件
如何让轮播不抢焦点、不影响页面 Tab 键顺序
用户按 Tab 时，焦点跳进轮播区再出不来，是高频投诉点。这不是 bug，是 Swiper 默认把所有按钮和 slide 设为 tabindex="0"。
修复方式很直接：
- 初始化时加
keyboard: { enabled: true, onlyInViewport: true }，让键盘操作只在轮播可见时生效 - 手动给
.swiper-slide加tabindex="-1"（用 JS 在swiper.on('init')里批量设），防止每个评价卡片都变成可聚焦元素 - 导航按钮保留
tabindex="0"，但加aria-controls="swiper-id"明确关联关系
轮播本身不是核心内容区域，它的交互优先级应该低于表单、链接等主操作元素。这点容易被忽略，但直接影响键盘用户的操作流。
