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.

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 -->
    });
});

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?