You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Swiper JS中如何使用activeIndex设置默认激活第二个而非首个轮播滑块

Swiper JS 默认激活第二个轮播滑块的配置方案
  • Swiper 的滑块索引从0开始计数,第二个滑块对应的索引值为1
  • 初始化时设置初始激活滑块使用initialSlide配置项即可,你提到的activeIndex是Swiper实例的属性,用于读取当前激活的滑块索引,不作为初始化配置项使用

修改后的完整初始化代码如下:

var swiper = new Swiper(".swiperEvent", {
    slidesPerView: "auto",
    centeredSlides: true, 
    spaceBetween: 115,
    initialSlide: 1, // 新增该行配置,默认激活第二个滑块
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

补充说明:如果是Swiper初始化完成后需要动态切换到第二个滑块,可以直接调用实例方法swiper.slideTo(1)。另外你提供的原有代码末尾多了一个多余的闭合},如果是粘贴误差可直接删除避免语法报错。

内容的提问来源于stack exchange,提问作者Sale Spam

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.26 08:15:02