React中如何在Swiper滑块事件触发时为当前滑块添加自定义类

直接通过状态追踪激活幻灯片索引+动态绑定类名即可实现，不需要手动操作DOM。

核心实现步骤 #

• 声明状态存储当前激活的幻灯片索引，初始值为0（首屏默认第一张激活）
• 给Swiper绑定两个回调：初始化完成时同步首屏索引，幻灯片切换开始时更新当前激活索引，保证缩放动画和切换动作同步启动
• 渲染幻灯片列表时，根据索引匹配状态，给激活项的图片加scale-150类，非激活项加scale-100类，保留已有的5秒过渡属性即可

完整代码 #

import { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { EffectFade } from 'swiper';
import 'swiper/css';
import 'swiper/css/effect-fade';

function Banner() {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <Swiper
      modules={[EffectFade]}
      effect="fade"
      onSwiper={(swiper) => setActiveIndex(swiper.activeIndex)}
      onSlideChangeTransitionStart={(swiper) => setActiveIndex(swiper.activeIndex)}
    >
      {items.map((item, index) => (
        <SwiperSlide key={item.id}>
          <img
            src={item.imageUrl}
            className={`h-screen w-full object-cover transition-transform duration-[5000ms] ease-linear ${
              index === activeIndex ? 'scale-150' : 'scale-100'
            }`}
          />
          <div>{item.title}</div>
          <div>{item.subtitle}</div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
}

补充说明 #

• 图片额外加w-full是为了保证宽度铺满视口，避免缩放时出现边缘留白
• 用onSlideChangeTransitionStart而不是onSlideChange，是因为前者在切换动画刚启动时就触发，缩放动画会和淡入效果完全同步，不会出现延迟
• 匀速缓动ease-linear适配慢放大的视觉需求，可根据设计要求替换成其他Tailwind缓动类

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