How to add a fade transition while updating the content react

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.