Tengo que hacer un control deslizante y lo que hice es eso. Importe todas las imágenes de los directorios y luego guárdelas en una matriz. después de eso hago dos botones + y -. Porque uso ganchos UseState que me ayudarán en dos funciones para sumar y restar. que recorrerá el índice de la matriz y mostrará las imágenes.

Mi pregunta es

1. ¿Cómo hago un efecto de transición mientras cambio estas imágenes?
2. Yo también tengo que escribir algo sobre las imágenes, respectivamente, en cada imagen, ¿cómo puedo escribir allí?

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 son estáticos y se consideran aleatorios.