Swiper是目前最省心、最可靠、真正跨端自适应的轮播方案；纯CSS方案存在自动播放暂停难、循环错位、移动端交互失效等问题，不建议生产使用。
Swiper 初始化必须等 DOM 挂载完成
常见错误是把 new Swiper() 放在 <script></script> 标签里，且写在 顶部——此时 .swiper-container 还没解析，querySelector 返回 null，构造函数直接静默失败，控制台可能只报 Cannot read property 'addEventListener' of null。
正确做法只有两种：
- 把
<script></script>放在前，确保 HTML 已解析完毕 - 或用
document.addEventListener('DOMContentLoaded', ...)包裹初始化逻辑
别信“加个 setTimeout 延迟 100ms 就行”——这属于玄学修复，不稳定。
Swiper v9+ 必须用 swiper-bundle.min.js
Swiper v9 开始默认导出 ES Module，若你直接通过 <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script> 引入，没问题；但若误引了 swiper.esm.browser.min.js 或 swiper.mjs，浏览器会抛出 Uncaught SyntaxError: Cannot use import statement outside a module。
立即学习“前端免费学习笔记（深入）”；
关键识别点：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 文件名含
bundle→ 可直接<script></script>引入 - 文件名含
esm/mjs→ 必须配合type="module"使用，否则报错 - CDN 上优先选
swiper-bundle.min.js+ 对应 CSS 文件（swiper-bundle.min.css）
移动端滑动卡顿？先关 watchSlidesProgress
这个配置项看着很酷（比如做视差、进度条），但它默认每帧触发 layout + paint。一旦设为 true 却没配 on('progress') 回调，Swiper 会持续监听并重绘，导致 iOS Safari 和部分安卓 WebView 滑动掉帧。
除非你真需要实时计算滑动进度，否则保持默认 false。如果确实要用：
- 务必绑定
on('progress')，哪怕只写空函数() => {} - 避免在回调里频繁操作 DOM 或触发重排（如读取
offsetWidth） - 搭配
watchOverflow: true防止小屏下因内容溢出导致误判
breakpoints 配置要覆盖最小断点
很多人写 breakpoints: { 768: { slidesPerView: 2 }, 1024: { slidesPerView: 3 } }，结果手机上还是显示 3 张——因为 Swiper 默认以最大匹配 breakpoint 为准，没写 0 或 320 的兜底项，就沿用初始化时的 slidesPerView: 1（或其它默认值）。
正确写法必须显式声明最小断点：
breakpoints: { 0: { slidesPerView: 1 }, 768: { slidesPerView: 2 }, 1024: { slidesPerView: 3 } }- 所有断点值是「≥该值」生效，不是「区间」
- 移动端优先用
slidesPerView: 'auto'+spaceBetween，比固定数值更适配不同 DPR 屏幕
最后提醒一句：Swiper 的响应式不是靠媒体查询驱动的，而是靠 JS 实时检测容器宽度并重置参数。所以不要在 CSS 里对 .swiper-wrapper 写 width: 100vw 类似的强制样式，会干扰它的尺寸判断。
