So erstellen Sie ein Karussell mit Bildern React Typescript [geschlossen] ⇐ CSS

[Guest]

Es ist nicht wirklich eine Frage, sondern eine Antwort. Ich habe ungefähr drei Tage lang versucht, sie selbst zu finden, und schließlich habe ich es geschafft. Bei meinen Recherchen ist mir aufgefallen, dass es bei einem Stackoverflow keine Antwort gibt.
Beginnen wir mit der Frage, wie man eine „Karussell“-ähnliche Funktion mit Bildern erstellt. Wir haben eine MainPage.tsx und einige Bilder.

Code: Select all

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;

Es kann einige Fehler geben, aber in den Antworten wird ein richtiger enthalten sein. ÜBERPRÜFEN Sie daher die ANTWORTEN AUF DEN RICHTIGEN CODE. Spielt es wirklich eine Rolle, was in den TSX-Dateien von MyBook1,2,3,4,5 enthalten ist? Nun ja, nicht wirklich, aber dennoch

Code: Select all

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!