Swiper是跨端适配最优解，需DOM加载后初始化、合理配置breakpoints、慎用watchSlidesProgress以避免卡顿，effect与breakpoint组合需真机调试。
用 Swiper 是目前最省心、真正能跨端适配的方案，别硬刚原生 CSS 动画或手写 touch 逻辑——兼容性差、滑动卡顿、移动端回弹失灵是常态。
Swiper 初始化前必须确保 DOM 已挂载
直接在 <body> 顶部写 new Swiper('.swiper') 会失败，返回 undefined。因为容器节点还没解析到 DOM 树里。
- 正确做法：等
DOMContentLoaded触发后再初始化，或把 script 放在 body 底部 - 若用模块化构建（如 Vite），需确保
import Swiper from 'swiper'后再实例化，不能混用swiper-bundle.min.js和 ES Module 写法 - 检查控制台是否报
Cannot find element with selector ".swiper"，就是 DOM 时机问题
breakpoints 配置决定多端尺寸切换逻辑
Swiper 的 breakpoints 不是“自动适配”，而是按你定义的断点手动切配置。不配就全用默认值，PC 和手机表现一样。
- 常见写法：
breakpoints: { 768: { slidesPerView: 2 }, 1024: { slidesPerView: 3 } } - 注意：断点数值是
minWidth，即 ≥768px 时才启用该配置；不写0:默认项，小屏可能完全没响应 - 如果轮播图高度要随屏幕变化，别只改
height，得配合 CSS 的aspect-ratio或 JS 动态设 style.height
watchSlidesProgress = true 会拖慢性能
这个选项开启后，Swiper 每帧都计算所有 slide 的 progress 值，但如果你没监听 progress 事件做动画，纯属白耗 CPU。
立即学习“前端免费学习笔记（深入）”；
- 现象：iOS 上滑动明显卡顿，Chrome Performance 面板能看到高频率 layout 强制同步
- 修复：删掉
watchSlidesProgress: true，或加上on: { progress: () => {} }占位 - 替代方案：需要视差/淡入效果时，用
effect: 'fade'或effect: 'creative'，更轻量
真正难的是 breakpoint 和 effect 的组合调试——比如 effect: 'coverflow' 在小屏上会溢出容器，但关掉又失去立体感；这种细节没法靠文档覆盖，得真机反复测 viewport 缩放和 touch 距离。
