How to add custom class to swiper slider on its events in React?

Question

Here's my Swiper code:

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

<Swiper
    modules={[EffectFade]}
    effect="fade"
>
    {
        items.map(item => <SwiperSlide key={item.id}>
            <img
                src={item.imageUrl}
                className="h-screen object-cover transition-transform duration-[5000ms] scale-150"
            />
            <div>{item.title}</div>
            <div>{item.subtitle}</div>
        </SwiperSlide>)
    }
</Swiper>

It works like a charm. Now I want to zoom out the background image when the slide changes.

I'm using tailwind. I need to set scale-100 as the default scale for all slides, and when a slide is shown (as soon as it's about to be changed and shown) I should set scale-150 so that it would zoom out over 5 seconds.

I'm stuck at this point. I know I should use events. But how can I link that event to the current slider?

Answer 1

From the Swiper documentation: https://swiperjs.com/react#styles

You could use either "isVisible" or "isActive" depending on your implementation, but the below code should work.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> import { Swiper, SwiperSlide } from 'swiper/react'; import { EffectFade } from 'swiper'; import 'swiper/css'; import 'swiper/css/effect-fade'; <Swiper modules={[EffectFade]} effect="fade" > { items.map(item => <SwiperSlide key={item.id}> {({ isVisible }) => ( <img src={item.imageUrl} className={`h-screen object-cover transition-transform duration-[5000ms] ${isVisible ? "scale-150" : ""}`} /> <div>{item.title}</div> <div>{item.subtitle}</div> ) </SwiperSlide>) } </Swiper>