如何在Swiper JS中设置默认激活slide？initialSlide和slideTo不生效如何解决

问题原因&解决方法 #

1. 参数类型错误 #

initialSlide要求传入数字类型，你当前传入的是字符串'2'，类型不匹配会导致参数不生效，直接改为数字2即可。

2. watchOverflow参数影响 #

当开启watchOverflow: true时，如果Swiper计算得出所有滑块总宽度小于容器宽度（即不需要滑动就能展示所有内容），会自动禁用滑动功能，此时initialSlide和slideTo方法都会失效。如果你的场景下就算不需要滑动也要定位到对应项，可以先关闭watchOverflow，或者单独做导航项的高亮逻辑。

3. 初始化时机问题 #

如果Swiper初始化时DOM还未完全渲染、或者滑块宽度还未计算完成，直接调用slideTo会因为尺寸计算错误失效。可以开启observer相关参数监听DOM变化，或者在Swiper的init事件回调中执行跳转逻辑。

更适配场景的实现（根据当前路由自动匹配激活项） #

你当前的场景是导航滑块，不需要硬编码初始索引，可以直接根据当前页面路径自动匹配对应滑块：

const $navSlider = $('[data-id="nav-slider"]');
const $swiperInstances = [];
const currentPath = window.location.pathname;

$navSlider.each(function (index, sliderElement) {
  const $this = $(this);
  $this.addClass(`instance-${index}`);
  
  // 遍历滑块找到和当前路径匹配的索引
  const $slides = $this.find('.swiper-slide');
  let activeIndex = 0;
  $slides.each(function (i, slide) {
    const linkHref = $(slide).find('a').attr('href');
    if (linkHref === currentPath) {
      activeIndex = i;
      // 提前给匹配的导航项加激活样式，避免滑动未生效时看不到选中态
      $(slide).find('.link').addClass('is-active');
    }
  });

  $swiperInstances[index] = new Swiper(sliderElement, {
    slidesPerView: 'auto',
    // 不需要自动禁用滑动可以设为false
    watchOverflow: false,
    initialSlide: activeIndex,
    // 开启DOM监听，避免动态内容导致计算错误
    observer: true,
    observeParents: true,
    on: {
      // 初始化完成后强制跳转，双重保险
      init: function () {
        this.slideTo(activeIndex, 0);
      }
    }
  });
});

同时补充导航激活态的CSS：

.link.is-active {
  /* 自定义你的高亮样式 */
  color: #2f54eb;
  font-weight: bold;
  border-bottom: 2px solid #2f54eb;
}

额外排查点 #

如果修改后还是不生效，可以检查以下两项：

• slidesPerView: 'auto'模式下需要给.swiper-slide设置不收缩的宽度，比如添加flex-shrink: 0和固定宽度/内边距，避免宽度计算异常
• 确认你使用的Swiper版本和参数文档匹配，不同大版本的配置项会有差异

内容的提问来源于stack exchange，提问作者Максим Медведєв