Splide 启用 loop 模式时会克隆 DOM 元素实现无缝轮播，导致 Lightbox（如 Fancybox、PhotoSwipe）误将克隆项计入图库总数；本文详解其原理，并提供两种稳定可靠的修复方案。
splide 启用 `loop` 模式时会克隆 dom 元素实现无缝轮播，导致 lightbox（如 fancybox、photoswipe）误将克隆项计入图库总数；本文详解其原理，并提供两种稳定可靠的修复方案。
在现代前端开发中，将图片轮播（Carousel）与全屏灯箱（Lightbox）组合使用是常见需求——例如在商品详情页中，用户既可滑动浏览缩略图，又可点击放大查看高清大图。然而，当使用 Splide（尤其是启用 type: "loop"）集成 Fancybox、PhotoSwipe 或 VenoBox 等主流 Lightbox 库时，开发者常遇到一个典型问题：Lightbox 显示的图片总数远超实际数量（如 3 张原始图却显示为 7 张）。该问题并非 Lightbox 本身缺陷，而是由 Splide 的循环机制与 Lightbox 的元素选取逻辑冲突所致。
? 根本原因：Splide 的克隆机制干扰 Lightbox 选择器
Splide 在 loop 模式下为实现无限滚动效果，会在 DOM 中动态插入克隆的 <li class="splide__slide--clone"> 元素（通常在列表首尾各添加若干副本）。这些克隆节点结构与原始 slide 完全一致，且同样携带 data-fancybox="gallery" 属性。当 Lightbox 初始化时（如 Fancybox.bind('[data-fancybox="gallery"]')），其底层会通过 document.querySelectorAll() 匹配所有匹配元素——克隆节点也被无差别纳入图库集合，从而导致计数错误和导航错乱。
✅ 验证方式：在浏览器控制台执行 document.querySelectorAll('[data-fancybox="gallery"]').length，你将看到返回值（如 7）明显大于原始 <li> 数量（如 3），并可通过 classList.contains('splide__slide--clone') 确认克隆节点的存在。
✅ 方案一：禁用 loop（适用于无需无缝循环的场景）
若业务场景允许非循环切换（即滑到末尾后停止，不自动跳回首张），最简方案是关闭 Splide 的 loop 模式，改用 type: "slide"：
const splide = new Splide('.splide-galerija', {
type: 'slide', // ← 关键：禁用克隆
perPage: 1,
arrows: false,
pagination: true,
// 其他配置保持不变...
});
splide.mount();
// Lightbox 正常绑定原始元素
Fancybox.bind('[data-fancybox="gallery"]');✅ 优点：零侵入、配置简洁、兼容所有 Lightbox 库。
⚠️ 注意：失去“无限滚动”体验，末尾无自动回环。
✅ 方案二：精准选择器过滤克隆节点（推荐用于必须 loop 的场景）
当产品要求严格无缝轮播时，应保留 type: "loop"，但改造 Lightbox 的初始化选择器，主动排除克隆元素。Splide 为克隆 slide 添加了专属类名 splide__slide--clone，我们可利用 CSS 伪类或属性选择器精准定位原始项：
// ✅ 正确写法：仅绑定非克隆 slide 内的链接
Fancybox.bind('li:not(.splide__slide--clone) [data-fancybox="gallery"]');
// 或更健壮的写法（兼容 Splide 版本差异）
Fancybox.bind('.splide__list > li:not(.splide__slide--clone) a[data-fancybox]');该选择器含义为：
- .splide__list > li：限定为轮播列表直系子项；
- :not(.splide__slide--clone)：排除带克隆类的节点；
- [data-fancybox="gallery"]：确保只绑定目标 lightbox 链接。
✅ 优点：兼顾 loop 功能与 Lightbox 准确性，无功能妥协。
? 提示：此方案同样适用于 PhotoSwipe（需配合 pswp 实例的 items 手动构造）或 VenoBox（使用 venobox({ selector: "...", ... })）。
⚠️ 注意事项与最佳实践
- 初始化时机很重要：务必在 splide.mount() 之后 再调用 Fancybox.bind()，确保 Splide 已完成 DOM 渲染（含克隆节点），否则选择器可能失效；
- 避免全局绑定：切勿使用 Fancybox.bind('[data-fancybox]') 这类宽泛选择器，易受页面其他模块干扰；
- 响应式验证：在移动端缩放、窗口 resize 后，建议监听 splide.on('moved', () => {...}) 并按需刷新 Lightbox（多数现代库已自动处理，但复杂嵌套时建议测试）；
- 替代方案参考：如项目允许技术栈调整，Fancyapps 官方提供的 Fancybox Carousel 原生支持无缝组合，无需手动干预克隆逻辑，适合新项目选型。
通过理解 Splide 的克隆机制本质，并采用“禁用 loop”或“选择器过滤”任一策略，即可彻底解决 Lightbox 图片计数异常问题，兼顾用户体验与代码健壮性。
