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?

Zur Startseite
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

8 Kommentare
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
Eric

Schick! Gleich mal testen.

Antworten
Claudio Schwarz
Claudio Schwarz

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

Antworten
Andi

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

Antworten
Udo
Udo

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

Antworten
Jan
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
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung