So nutzt du: Slick Slider Generator
- Wähle die Optionen für deinen Slick-Slider und den Slide-Inhalt: Demo-Panels, eigene Bild-URLs oder Karten.
- Lege die Slides pro Ansicht für Desktop, Tablet und Mobil fest, dazu Abstand, Effekt, Endlosschleife, Autoplay, Pfeile und Paginierung.
- Prüfe die Live-Vorschau in Desktop-, Tablet- und Mobilbreite.
- Kopiere das HTML, CSS und JavaScript (CDN oder npm) oder lade eine komplette HTML-Seite herunter.
Über Slick
Slick („das letzte Carousel, das du jemals brauchst“) war jahrelang der Standard-Carousel auf jQuery-Basis und steckt noch immer in vielen WordPress-Themes, Shopify-Shops und älteren Websites. Er unterstützt Responsive-Breakpoints, Center-Modus, Fade, vertikales Scrollen, Lazy Loading und Autoplay. Die letzte Version (1.8.1) stammt aus dem Jahr 2017, und er benötigt jQuery.
Slick-Optionen
| Option | Bedeutung |
|---|---|
slidesToShow / slidesToScroll | Sichtbare Slides und wie viele pro Klick weiterlaufen |
responsive | Array aus { breakpoint, settings }; jede Regel gilt unterhalb der Breakpoint-Breite |
infinite | Slides in Schleife abspielen |
autoplay, autoplaySpeed | Automatische Wiedergabe und Verzögerung |
fade | Überblenden (immer ein Slide gleichzeitig) |
centerMode | Zentriert das aktive Slide mit angeschnittenen Nachbarn |
Abstände zwischen Slides
Slick hat keine Abstand-Option. Das generierte CSS setzt einen horizontalen Margin auf .slick-slide und einen negativen Margin auf .slick-list, damit die äußeren Kanten bündig bleiben.
Solltest du Slick noch verwenden?
Für eine bestehende Website, die bereits jQuery und Slick lädt, ist es sinnvoll, dabei zu bleiben. Für neue Projekte sind Swiper oder Splide kleiner, werden gepflegt, sind besser zugänglich und brauchen kein jQuery. Wechsle oben die Bibliothek, dann wandelt der Generator deine Einstellungen um.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Größe (minifiziert + gzip, JS) | ~40 KB (Bundle) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Abhängigkeiten | Keine | Keine | Keine | jQuery |
| Effekte | Slide, Fade, Cube, Coverflow, Flip, Cards, Creative | Slide, Fade | Slide | Slide, Fade |
| Vertikal | Ja | Ja | Nein | Ja |
| Barrierefreiheit | Gut (a11y-Modul) | Hervorragend (ARIA standardmäßig) | Grundlegend | Grundlegend |
| Wird gepflegt | Ja | Ja | Langsam | Nein (letzte Version 2017) |
| Lizenz | MIT für alle vier | |||
Auch gesucht als: slick slider, slick carousel, slick slider beispiel, slick responsive, slick autoplay, jquery carousel, slick cdn.
Passende Tools zu: Slick Slider Generator
- Slider- & Karussell-Generator — Karussells per Klick konfigurieren, statt die Doku zu wälzen: Bibliothek wählen, Breakpoints, Effekte und Steuerung einstellen, die Live-Vorschau prüfen und produktionsreifes HTML, CSS und JavaScript kopieren.
- Swiper Slider Generator — Konfiguriere Swiper 11 mit einem visuellen Editor – responsive Breakpoints, Effekte, Autoplay, Pagination-Typen und mehr – und kopiere sofort einsatzbereites HTML, CSS und JavaScript.
- Splide Slider Generator — Baue ein barrierefreies, schlankes Splide-Karussell, ohne die Doku zu wälzen.
- Online HTML-Editor — Ein schlanker Code-Spielplatz: Bearbeite HTML, CSS und JavaScript nebeneinander, sieh das Ergebnis sofort, lies die Konsolenausgabe und lade deine Seite als eine HTML-Datei herunter.
Häufige Fragen
Benötigt Slick jQuery?
Wie füge ich Abstände zwischen Slick-Slides hinzu?
.slick-slide und einen passenden negativen Margin auf .slick-list. Der Generator schreibt das anhand des Abstand-Werts automatisch.