Swiper切换图片分类时默认显示第二张slide 如何调整为显示分类首张图片

你在使用带column mapping功能的Swiper实现Interior（内饰）、Exterior（外观）两类图片轮播时，切换分类后默认展示第二张slide，可按以下步骤调整为默认展示对应分类的第一张图片：

• 首先确认每个分类下的首张slide对应索引，确保两类图片的slide在DOM结构中按分类连续排列，避免索引错位。
• 监听分类切换的点击事件，每次触发分类切换后，手动调用Swiper实例的slideTo()方法定位到对应分类的首张slide，设置滚动速度为0消除跳转动画，示例代码如下：

// 示例：假设Interior分类首张索引为0，Exterior分类首张索引为4
const categoryBtns = document.querySelectorAll('.category-btn');
categoryBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 分类切换逻辑（可放置你原本的参数修改、slide过滤等代码）
    const targetStartIndex = btn.dataset.category === 'interior' ? 0 : 4;
    // 直接定位到目标分类首张slide
    mySwiper.slideTo(targetStartIndex, 0, false);
  })
})

• 检查Swiper的slidesPerGroup配置，若开启了分组滑动，要确保分组序号从0开始计数，不要将默认跳转的分组序号设为1，这是导致默认跳到第二张的常见原因。
• 若使用了Swiper Grid的column mapping配置，需确认grid.fill属性设置为'column'，避免行填充逻辑打乱slide的索引顺序，保证分类对应的slide索引连续正确。

内容的提问来源于stack exchange，提问作者Oleg Andreev