Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Ein Slider für alle Fälle: Slick ist das jQuery-Carousel, das du wirklich brauchst

Egal ob Slider oder Carousel, Slick kann beides.

Kaum eine Website kommt ohne sie aus: Slider beziehungsweise Carousels. Aber entweder sind sie nicht responsive, mobil einsetzbar oder ihnen fehlt ein klassisches „Autoplay“. Die Suche hat jetzt ein Ende. Wir zeigen euch Slick.

Ihr möchtet ein Carousel in euer Webprojekt einbinden? Bleibt nur die Frage, welche Features gewünscht sind – denn Slider beziehungsweise Carousels gibt es wie Sand am Meer. Und wie sieht es mit Responsivness, verschiedenen Einstellungen pro Breakpoint, CSS3, Swipes, Indikatoren, Pfeilen, Mouse-Dragging, Autoplay, Lazy-Loading, Fading, Infinite-Looping, einer Unterstützung von Pfeiltasten, Themes und Callbacks aus? Wenn ihr alle Features haben wollt, ist Slick genau das Richtige für euch.

slick
Slick liefert auch eine Lazy-Load-Funktion. (Screenshot: t3n)

Slick: Ein Slider, um die anderen zu knechten

Besonders praktisch ist die Slick-Option, um verschiedene Breakpoints definieren zu können. Das heißt, ihr könnt Slick für verschiedene Auflösungen unterschiedlich darstellen lassen.

$('.slider').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3,
        infinite: true
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1,
        dots: true,
        lazyLoad: 'ondemand'
      }
    }
  ]
});    

Slick erfüllt beinahe jeden Entwickler- beziehungsweise Kundenwunsch. Slick hat komprimiert rund 25 Kilobyte, kann aber über das jsdelivr.net-CDN geladen werden. Die Implementierung von Slick ist sehr komfortabel und eher rudimentär, denn Slick animiert einfach alles innerhalb eines definierten HTML-Elements – es muss nur eine CSS-Klasse oder ID vergeben werden.

<div class="slider">
        <div>Text 1</div>
        <div>Text 2</div>
        <div>Text 3</div>
</div>

Nachdem ihr die JavaScript-Library jQuery (mindestens Version 1.7) eingebunden und die HTML-Struktur des Sliders aufgebaut habt, könnt ihr mit der folgenden Anweisung Slick initialisieren.

$(document).ready(function(){
    $('.slider').slick({
            <!-- Eure Optionen -->
    });
});

Fazit zu Slick

Slick wirbt auf der Website mit: „the last carousel you'll ever need“ – und ich kann dem nur zustimmen. Für die Lazy-Loading-Funktion würde ich mir aber einen Ladebalken oder Spinner wünschen, was gerade dann wichtig wird, wenn große Bilder nachgeladen werden sollen. Die Handhabung dagegen ist wirklich extrem einfach, gerade durch die Breakpoint-Funktion. Einen Slider, der zu einem Carousel wird – oder umgekehrt – und das abhängig vom Gerät? Mit Slick kein Problem. Auf GitHub findet ihr die Dokumenation zu Slick.

In einem anderen t3n-Artikel haben wir über ähnliche Slider wie Slick geschrieben. Welches Carousel/Slider habt ihr bis jetzt benutzt?

Bitte beachte unsere Community-Richtlinien

7 Reaktionen
Jan

Hilfe! Wir haben viele Bilder für das Carousel. Deswegen lädt die Webseite langsam. Statt einem hübschen Carousel wäre mir ein Performance lieber. Wie bekomme ich das hin? Kann man z. B. Bilder verbinden?

Antworten
Udo

45KB sind für einen Slider aber definitiv zu viel.

Antworten
Andi

Also das Owl Carousel gefällt mir sogar einen Tick besser als Slick. Danke für den Tipp.

Antworten
Claudio Schwarz

Owl Carousel kann ziemlich das gleiche und sogar noch etwas mehr (oder anderes).

Antworten
Eric

Schick! Gleich mal testen.

Antworten
Susannna Künzl

Wenn man Bootstrap sowieso für eine Website benutzt, tut es für viele Anwendungsfälle auch das Bootstrap-Karussell. Responsive ist es auch. Wie man es ohne zusätzliche Extension in TYPO3 anwendet, haben wir in unserem Blog beschrieben: http://www.ambranet.de/blogpost/cms/bootstrap-karussell-fuer-typo3.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.