Splide是一款轻量灵活的轮播图组件，很多场景下会搭配Lightbox组件实现点击轮播图片后放大预览的效果，同时需要在Lightbox中显示当前图片的索引和总数量。但实际开发中经常出现计数异常的情况，比如切换轮播后Lightbox的当前计数不更新、总数量显示和实际轮播图片数量不符等问题。
常见的计数异常根源
1. 事件监听时机不匹配
Splide的轮播切换事件和Lightbox的打开事件触发顺序不一致，会导致计数同步失败。比如Lightbox在打开时直接读取初始化的轮播索引，而没有监听后续Splide的move事件更新索引，就会出现切换轮播后计数不更新的问题。
2. 实例引用错误
如果Splide或者Lightbox的实例没有正确暴露，或者在初始化完成前就调用了相关方法，会导致获取到的索引、图片数量等数据是错误的。比如动态加载轮播内容后，没有重新获取Splide的length属性，Lightbox读取的还是旧的总数。
3. 动态数据未同步
当轮播内容是动态加载的，比如通过接口获取图片列表后再渲染Splide，此时如果Lightbox的图片列表没有和Splide的实时数据同步，就会出现总数不匹配的问题。比如Splide渲染了5张图片，但Lightbox只拿到了3张的列表，计数自然异常。
对应的解决方案
同步事件监听逻辑
需要在Splide的move事件触发时，同步更新Lightbox的当前索引。首先确保Splide和Lightbox都初始化完成，再绑定事件：
// 初始化Splide轮播
const splide = new Splide('#splide', {
type: 'loop',
perPage: 1,
}).mount();
// 初始化Lightbox，假设使用常见的lightbox库
const lightbox = new Lightbox({
// 初始配置
});
// 监听Splide切换事件，同步更新Lightbox当前索引
splide.on('move', (newIndex) => {
// 通知Lightbox切换到对应索引
lightbox.setCurrentIndex(newIndex);
});
// 点击轮播图片打开Lightbox时，传入当前Splide的索引
document.querySelectorAll('.splide__slide img').forEach((img, index) => {
img.addEventListener('click', () => {
// 获取当前Splide的实时索引
const currentIndex = splide.index;
lightbox.open(currentIndex);
});
});
正确获取实例属性
获取轮播总数量时，要使用Splide实例的length属性，而不是自己计算DOM节点数量，避免动态更新后数据不一致：
// 获取Splide轮播的总图片数 const totalCount = splide.length; // 将总数同步给Lightbox lightbox.setTotalCount(totalCount);
动态数据同步更新
如果轮播内容是动态加载的，需要在Splide重新渲染后，同步更新Lightbox的图片列表和总数：
// 假设动态获取图片列表
async function loadCarouselData() {
const res = await fetch('https://ipipp.com/api/images');
const imageList = await res.json();
// 渲染Splide的slide内容
const slideContainer = document.querySelector('.splide__list');
slideContainer.innerHTML = imageList.map(url => `<li class="splide__slide"><img src="${url}" /></li>`).join('');
// 重新计算Splide的长度
splide.refresh();
// 同步更新Lightbox的图片列表和总数
lightbox.setImageList(imageList);
lightbox.setTotalCount(splide.length);
}
验证方案有效性
完成上述修改后，可以通过以下场景验证计数是否恢复正常：
- 切换Splide轮播页，打开Lightbox后查看当前计数是否和轮播当前页一致
- 动态新增轮播图片后，打开Lightbox查看总数量是否更新
- 循环模式下切换轮播，确认计数不会出现越界或者归零异常
按照上述思路排查和调整代码，基本可以解决Splide搭配Lightbox时的图片计数异常问题，保证两个组件的联动逻辑符合预期。