如何在swiper/react中为活跃幻灯片的前第二个幻灯片设置样式？

你遇到的核心问题是CSS没有前向相邻兄弟选择器——+只能选择目标元素之后的相邻兄弟，无法选中它之前的元素。所以要给swiper-slide-prev的前一个（也就是活跃幻灯片的前前项）设置样式，得换用以下方法：

方法1：通过Swiper API动态添加自定义类 #

利用Swiper的slideChange事件，在幻灯片切换时计算当前活跃项的索引，找到前前项并添加自定义类，再通过类选择器写样式。

步骤1：修改Swiper初始化代码（添加事件监听） #

const swiper = new Swiper('.swiper-container', {
  // 你的现有配置（比如 slidesPerView、loop 等）
  on: {
    slideChange: function () {
      // 先清除所有已添加的自定义类
      document.querySelectorAll('.swiper-slide-prev-prev').forEach(el => el.classList.remove('swiper-slide-prev-prev'));
      
      const activeIdx = this.activeIndex;
      // 计算前前项的索引（非loop模式）
      const prevPrevIdx = activeIdx - 2;
      
      // 确保索引在有效范围内
      if (prevPrevIdx >= 0 && prevPrevIdx < this.slides.length) {
        this.slides[prevPrevIdx].classList.add('swiper-slide-prev-prev');
      }
      
      // 如果开启loop模式，需处理循环索引逻辑：
      // if (this.loop) {
      //   const realIdx = this.realIndex;
      //   const totalSlides = this.slides.length;
      //   const targetIdx = (realIdx - 2 + totalSlides) % totalSlides;
      //   this.slides[targetIdx].classList.add('swiper-slide-prev-prev');
      // }
    }
  }
});

步骤2：添加对应CSS样式 #

// second previous
:global(.swiper-slide-prev-prev) {
  opacity: 40%;
}

方法2：利用Swiper内置类结合:nth-child（仅适用于非loop、固定排列场景） #

如果你的Swiper未开启循环，且slidesPerView固定，可尝试通过:nth-child结合活跃项位置选择，但该方法灵活性差，布局变化后易失效：

:global(.swiper-slide-active:nth-child(n+3) ~ .swiper-slide-prev ~ .swiper-slide) {
  opacity: 40%;
}

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