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

1. How do i make a transition effect while changing this images
2. 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.