Swiper react.js

Issue

i want to ask why class does not working if I want control swiper is active class(.swiper-slide-active) work I put class put does not work there is code

Component Code:

import styles from './styles.module.css';

export default function SwiperProduct() {
  
  return (
    <Swiper
      modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay, EffectFade]}
      spaceBetween={50}
      slidesPerView={1}
      navigation
      autoplay={{ delay: 4000, disableOnInteraction: true }}
      effect="fade"
      pagination={{ clickable: true }}
    // scrollbar={{ draggable: true }}
      
    >
      <SwiperSlide className='p-5 d-flex justify-content-center'>
        <img className='object-fit-cover' src={phones} width='100%' height='400px' alt='' />
this class i put

        <article className={`position-absolute text-start ${styles.swiperSlide}`}>
          <article className={`p-5 ${styles.collection}`}>
            <p className={'pt-5'}>NEW COLLECTION</p>
            <button className='btn btn-outline-warning'>Shop Now</button>
          </article>
        </article>
      </SwiperSlide>

css code:

.swiperSlide {
    background-color: rgba(240, 248, 255, 0.212); 
    height: 400px;
    width: 820px;
    opacity: 0;
}
.swiper-slide-active .swiperSlide {
    opacity: 0;
    transition: 1s ease;
}
.collection {
    transform: translate(-85px);
    opacity: 0;
    transition: 1s ease;
    height: 400px;
    width: 820px;
}

.swiper-slide-active .collection {
    opacity: 1;
    transition: 1s ease;
    transform: translateX(0);
}

I tried to target this class and search I don't found solution.

Solution

'swiper-slide-active' is Not supported in Swiper React/Vue components

You can make it manually with two solutions:

1. SwiperSlide render function

       <Swiper
        className="w-full max-w-md h-40 p-6 space-y-2 text-center flex flex-col items-center justify-center"
        modules={[Navigation, Pagination, Scrollbar, A11y]}
        spaceBetween={50}
        slidesPerView={3}
        navigation
        pagination={{ clickable: true }}
        scrollbar={{ draggable: true }}
      >
        {Array.from({ length: 10 }).map((_, index) => (
          <SwiperSlide key={index} className="w-full max-w-sm p-6 space-y-2 text-center flex flex-col items-center justify-center">
            {({ isActive }) => (
              <div className={`${isActive ? "bg-green-500" : null}`}>Slide {index + 1}</div>
            )}
          </SwiperSlide>
        ))}
      </Swiper>

2.onSlideChange with custom State

const [activeSlideIndex, setActiveSlideIndex] = React.useState(0)

  <Swiper
    className="w-full max-w-md h-40 p-6 space-y-2 text-center flex flex-col items-center justify-center"
    modules={[Navigation, Pagination, Scrollbar, A11y]}
    spaceBetween={50}
    slidesPerView={3}
    navigation
    pagination={{ clickable: true }}
    scrollbar={{ draggable: true }}
    onSlideChange={(swiper) => setActiveSlideIndex(swiper.activeIndex)}
  >
    {Array.from({ length: 10 }).map((_, index) => (
      <SwiperSlide key={index} className={`w-full max-w-sm p-6 space-y-2 text-center flex flex-col items-center justify-center`}>
        <div className={`${activeSlideIndex === index ? "bg-green-500" : null}`}>
          Slide {index + 1}
        </div>
      </SwiperSlide>
    ))}
  </Swiper>

Answered By - Mahmoud Zenhom