Karussell-Generator (Slider) mit CSS scroll-snap
Füge die Bilder ein und wähle, wie viele gleichzeitig erscheinen. Das Gleiten übernimmt der Browser selbst mit scroll-snap; das Skript bewegt nur die Pfeile.
So geht’sLeichtes Karussell, das man mit dem Finger zieht
Verfügbar auf: 
Karussell-Generator (Slider) mit CSS scroll-snap: wofür es gut ist
Karussells aus Fotos oder Karten sind auf Handelswebsites üblich, aber Slider-Bibliotheken sind schwer und blockieren manchmal das Scrollen am Handy.
Dieser Generator nutzt das scroll-snap von CSS, das jedes Element mit dem nativen Scrollen des Browsers einrasten lässt: Das Wischen mit dem Finger ist geschmeidig, funktioniert mit Trackpad und Tastatur und hat fast kein JavaScript. Wähle, wie viele Elemente am Computer und am Handy gleichzeitig erscheinen (auch eins und ein Stück vom nächsten, um zu zeigen, dass man ziehen kann), den Abstand und die Ecken. Ohne automatische Rotation, die das Lesen und die Barrierefreiheit stört (WCAG 2.2.2).
So geht’s
- Füge die Adressen der Bilder ein.
- Wähle, wie viele gleichzeitig erscheinen, und den Abstand.
- Kopiere den Code und füge ihn in die Website ein.
Wann nutzen
- Produktschaufenster.
- Fotos von Arbeiten und Portfolio.
- Karten mit Kundenstimmen oder Leistungen.
Häufige Fragen
Warum scroll-snap und keine Bibliothek?
scroll-snap nutzt das native Scrollen des Browsers: Das Wischen am Handy ist so geschmeidig wie bei Instagram, funktioniert mit Trackpad und Tastatur und wiegt nichts. Slider-Bibliotheken fügen meist Dutzende KB JavaScript hinzu, um dasselbe zu tun.
Läuft das Karussell von selbst?
Nein, mit Absicht. Ein Karussell, das sich von selbst dreht, stört das Lesen und ist ein Problem der Barrierefreiheit (WCAG 2.2.2 verlangt, dass man etwas anhalten kann, das sich länger als 5 Sekunden bewegt). Wer mehr sehen will, zieht oder nutzt die Pfeile.
Funktioniert es mit Textkarten?
Ja. Ersetze die Bilder durch beliebigen Inhalt in jedem Listenelement; Größe und Einrasten bleiben gleich.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.