Как создать карусель с изображениями React Typescript [закрыто] ⇐ CSS

[Anonymous]

На самом деле это не вопрос, а ответ, я пытался найти сам около 3 дней и, наконец, нашел. Проводя исследования, я понял, что в stackoverflow нет ответа.
Давайте начнем с вопроса: как создать функцию типа «карусели» с изображениями. У нас есть файл MainPage.tsx и несколько изображений.
import { useState } from "react";
import Book1 from "./books/MyBook1";
import Book2 from "./books/MyBook2";
import Book3 from "./books/MyBook3";
import Book4 from "./books/MyBook4";
import Book5 from "./books/MyBook5";
import "./MainPage.css";

const MainPage = () => {
const books = [
,
,
,
,

];

const [currentIndex, setCurrentIndex] = useState(0);

return (

{books.map((book, index) => (

{book}

))}

);
};

export default MainPage;

Возможно, есть некоторые ошибки, но в ответах будет правильный, поэтому ПРОВЕРЬТЕ ОТВЕТЫ НА ПРАВИЛЬНЫЙ КОД. Действительно ли имеет значение то, что есть в tsx-файлах MyBook1,2,3,4,5, ну не совсем, но все же
import "./css/bolashakBook.css"
import { useState } from "react"
import { Box, Modal } from "@mui/material";
import PDFFILE from "../../assets/images/mybook1.pdf"

const MyBook1 = () => {

const [ isFrameOpen, setIsFrameOpen ] = useState(false);

const handleOnClickFrame = () => {
setIsFrameOpen(!isFrameOpen)
}

return (

setIsFrameOpen(false)}>





[img]{MyBookImage}
onClick={handleOnClickFrame}
alt="My book one"
>


)
}
export default MyBook1; ```

CHECK THE ANSWERS THAK YOU FOR THE CSS thank you!


Подробнее здесь: https://stackoverflow.com/questions/793 ... typescript