WordPress通过JavaScript设置Swiper轮播加载时默认激活首项

问题说明 #

现有基于jQuery和Swiper实现的轮播滑块组件，已经绑定了导航项点击切换幻灯片、幻灯片切换时同步更新导航激活样式的逻辑，但页面加载完成后不会默认激活首个导航项（对应“Lean on us”）及匹配幻灯片，需要用户手动点击才能触发激活效果。

实现方案 #

原有代码的逻辑已经覆盖了「幻灯片切换时自动给对应导航加active类」的能力，只需要在Swiper实例初始化完成、事件绑定结束后，主动触发一次跳转到首个目标幻灯片的方法，即可复用原有逻辑完成默认激活，无需额外重复编写样式操作代码。

修改后完整JS代码 #

// Slider navigation JS
jQuery(window).load(function () {
  const imageCarousel = jQuery(".myslider .swiper-container"),
    swiperInstance = imageCarousel.data("swiper");

  jQuery("#slide0").click(function () {
    swiperInstance.slideTo(1);
  });
  jQuery("#slide1").click(function () {
    swiperInstance.slideTo(2);
  });
  jQuery("#slide2").click(function () {
    swiperInstance.slideTo(3);
  });
  jQuery("#slide3").click(function () {
    swiperInstance.slideTo(4);
  });
  
  if (swiperInstance != undefined) {
    swiperInstance.on("slideChange", function () {
      var slide = String(swiperInstance.realIndex);
      jQuery(".slide_nav").removeClass("active");
      jQuery("#slide" + slide).addClass("active");
    });
    // 新增：初始化完成后默认跳转到首个幻灯片，自动触发导航激活
    swiperInstance.slideTo(1);
  }
});

改动说明 #

• 仅新增1行swiperInstance.slideTo(1);代码，放在slideChange事件绑定之后执行，保证跳转时能触发已绑定的切换回调，自动给#slide0导航项添加active样式，同时切换到对应幻灯片，和用户手动点击#slide0的效果完全一致。
• 原有CSS代码不需要做任何调整，即可直接生效。

可选优化（解决加载闪动问题） #

如果页面加载时能看到轮播先停在其他位置再跳转到首个幻灯片的闪动效果，可以直接在Swiper初始化配置中添加initialSlide: 1参数，让Swiper初始化时直接定位到目标幻灯片，从根源避免闪动。这种方式不需要额外写slideTo调用代码，示例配置片段：

const swiper = new Swiper('.myslider .swiper-container', {
  // 原有配置参数保留（如loop、pagination等）
  initialSlide: 1, // 初始定位到首个业务幻灯片索引
  // 其余原有配置
})

注意：如果是Elementor可视化搭建生成的Swiper实例，不方便直接修改初始化配置的话，使用前面加slideTo的方案即可，兼容性更好。

内容的提问来源于stack exchange，提问作者Mohammed Faizan N