Can i add animation effect while changing the picture in react-CodePudding

I have to make a slider and what i did is that. Import all the images from directories and then stores them in an array. after that i make two button and - . Because i use UseState hooks which has will help in two function add and subtract. which will loop through the index of array and show the images.

My question is

How do i make a transition effect while changing this images
I too have to write something over images respectivly in each image how can i write there.

Slider.js

import React, { useState } from "react";
import Img1 from "../data/SliderImages/1.avif";
import Img2 from "../data/SliderImages/2.avif";
import Img3 from "../data/SliderImages/3.avif";
import Img4 from "../data/SliderImages/4.jpg";
import Img5 from "../data/SliderImages/5.jpg";
import Img6 from "../data/SliderImages/6.jpg";
import Img7 from "../data/SliderImages/7.avif";

function Slider() {
  let SliderArray = [Img1, Img2, Img3, Img4, Img5, Img6, Img7];
  const [count, setCounter] = useState(0);
  const addIndex = () => {
    if (count > SliderArray.length - 1) {
      setCounter = 6;
    } else {
      setCounter(count   1);
    }
  };

  const subIndex = () => {
    if (count === 0) {
      setCounter = 0;
    } else {
      setCounter(count - 1);
    }
  };

  return (
    <div>
      <h1>Slider</h1>

      <button onClick={addIndex}>Add Image</button>
      <img src={SliderArray[count]} alt="" />
      <button onClick={subIndex}>Add Image</button>
    </div>
  );
}

export default Slider;

Img1, ... Img7 are static consider random.

CodePudding user response：

const [transition, setTransition] = useState("");

const transit = (direction: string) => {
  setTransition("transition-"   direction);
  setTimeout(() => {
    setTransition("");
  }, 500);
};

<button
  onClick={() => {
    transit("left");
    addIndex();
  }}
>
  Add Image
</button>

<button
  onClick={() => {
    transit("right");
    subIndex();
  }}
>
  Sub Image
</button>

<img
  className={transition}
  style={{ height: "200px", width: "200px" }}
  src={SliderArray[count]}
  alt=""
/>

CSS

.transition-right {
  animation: fadeinRight 0.5s ease-in-out;
}

.transition-left {
  animation: fadeinLeft 0.5s ease-in-out;
}

@keyframes fadeinRight {
  0% {
    transform: translateX(300px);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeinLeft {
  0% {
    transform: translateX(-300px);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

With the text

const img1 = { src: 'https://picsum.photos/200/200', text: 'foo' };
const img2 = { src: 'https://picsum.photos/200/300', text: 'bar' };
const img3 = { src: 'https://picsum.photos/200/400', text: 'foobar' };
const img4 = { src: 'https://picsum.photos/200/500', text: 'barfoo' };

<img
  className={transition}
  style={{ height: '200px', width: '200px' }}
  src={SliderArray[count].src}
  alt=""
/>
<p>{SliderArray[count].text}</p>