JSFiddle - React, Tailwind, and code Playground
by Sunnyx
HTML
<!-- Vorlage zum Erstellen eines Magazins mit Seiten, die man blättern kann --> <!-- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Die einzelnen Seiten können einzeln erstellt werden und dann hintereinander eingefügt werden. Dann muss man folgende zusätzliche Dinge tun:
-Alle Seiten brauchen eine id! Am besten jeweils in das äußerste div von jeder Seite id="seiteX" einfügen.
-Alle Seiten außer die erste dürfen am Anfang nicht sichtbar sein! Am besten jeweils in das äußerste div von jeder Seite (außer der 1.) style="display: none;" einfügen.
-Nun bauchen wir zwei Pfeile/Boxen/Kreise/... um die Seiten blättern zu können. Diese sollten sich NICHT in den einzelnen Seiten befinden, sondern außerhalb.
Die Pfeile zum Blättern brauchen auch jeweils eine id (z.B. naechsteSeite und vorherigeSeite) und der Pfeil für die vorheige Seite sollte am Anfang nicht sichtbar sein (display: none;) (wir starten ja auf Seite 1, da kann man nicht zurückblättern).
Außerdem ist z-index: 999; in style="..." ganz sinnvoll, damit die Pfeile "ganz oben" sind und nicht duch andere Elemente blockiert weden. Außerdem cursor: pointer; um den Mauszeiger als Hand anzuzeigen, wenn man über die Pfeile hovert.
Ich persönlich finde es am übersichtlichsten, wenn die Pfeile ganz oben vor dem Code für die 1. Seite stehen und das zugehörige Script ganz unten und die beiden Sachen die eigentlichen Seiten quasi "umrahmen", aber ist wahscheinlich Geschmackssache
-Der Letzte Schritt ist es, den Code zum Blättern der Seiten einzufügen. Dies würde ich wie gesagt ganz unten als letztes machen. Generell können (soweit ich weiß) auch alle Script Inhalte in demselben Scriptteil am Ende stehen, aber das finde ich nicht so übersichtlich....