How to add a fade transition while updating the content react - css

Question

I'm trying to create a slider with react. I've an array of slides. I'm using useState to store the active slide and then updating it every 3 seconds with useEffect.
const [activeSlide, setActiveSlide] = useState(slides[2]);
useEffect(() => {
setTimeout(() => {
setActiveSlide((prevState) => slides[prevState.next]);
}, 5000);
}, [activeSlide]);
using active slide in jsx like so:
<h4 className='font-medium text-gray-600 dark:text-gray-200'>{activeSlide.desc}</h4>
I'm not sure how can I add a fade effect when slide is updating. any suggestions ?

Answer 1

If you are improving your CSS skills, please don't regard my suggestion. Otherwise, you can use Crousel from react-slick.
There is an example, code took from material-kit-react:
Import the react-slick:
import Carousel from "react-slick";
Define settings with autoplay:true and fade:true:
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
fade: true
};
The return function in material-kit-react:
return (
<div className={classes.section}>
<div className={classes.container}>
<GridContainer>
<GridItem xs={12} sm={12} md={8} className={classes.marginAuto}>
<Card carousel>
<Carousel {...settings}>
<div>
<img src={image1} alt="First slide" className="slick-image" />
<div className="slick-caption">
<h4>
<LocationOn className="slick-icons" />
Yellowstone National Park, United States
</h4>
</div>
</div>
<div>
<img
src={image2}
alt="Second slide"
className="slick-image"
/>
<div className="slick-caption">
<h4>
<LocationOn className="slick-icons" />
Somewhere Beyond, United States
</h4>
</div>
</div>
<div>
<img src={image3} alt="Third slide" className="slick-image" />
<div className="slick-caption">
<h4>
<LocationOn className="slick-icons" />
Yellowstone National Park, United States
</h4>
</div>
</div>
</Carousel>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
);
Just change it and ready to go. I wish that help you and save your time.