Paginierung mit dehnbaren Punkten
Ein Karussell, dessen aktiver Punkt sich zur Pille dehnt und sich mit der Zeit füllt, bevor es weitergeht.
Einstellungen
Code
<section class="uv-nsd" aria-roledescription="carrusel" aria-label="Highlights"><div class="tr" tabindex="0"><article style="--a:#ff9a8b;--b:#ff6a88" aria-label="1 / 4"><b>Neue Sommerrouten</b></article><article style="--a:#a1c4fd;--b:#c2e9fb" aria-label="2 / 4"><b>Wochenendtrips</b></article><article style="--a:#d4fc79;--b:#96e6a1" aria-label="3 / 4"><b>Ausflüge in die Natur</b></article><article style="--a:#fbc2eb;--b:#a6c1ee" aria-label="4 / 4"><b>Städte zu Fuß entdecken</b></article></div><div class="ft"><button type="button" class="pv" aria-label="Zurück"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><div class="dt"><button type="button" aria-label="Zu 1" aria-current="true"><i></i></button><button type="button" aria-label="Zu 2"><i></i></button><button type="button" aria-label="Zu 3"><i></i></button><button type="button" aria-label="Zu 4"><i></i></button></div><button type="button" class="nx" aria-label="Weiter"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div></section>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Karussells im Story-Stil zeigen den Fortschritt im aktiven Punkt, man weiß also, wann die nächste Folie kommt. Hier wird der aktuelle Punkt zu einer Pille, die sich von links nach rechts füllt, dann scrollt das Karussell zur nächsten Karte und der nächste Punkt dehnt sich. Hover oder Fokus pausieren, Pfeile und Punkte springen direkt.
Die Schiene nutzt natives Scroll-Snapping, Wischen auf Touchscreens funktioniert also sofort und die Punkte bleiben synchron. Bei reduzierter Bewegung stoppt der Timer und die Pille erscheint voll, die Navigation liegt dann ganz bei den Nutzern.