Anzeige
Anzeige
UX & Design
Artikel merken

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

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.

Von Mario Janschitz
2 Min. Lesezeit
Anzeige
Anzeige

Egal ob Slider oder Carousel, Slick kann beides.

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

Anzeige
Anzeige

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.

Anzeige
Anzeige
<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.

Anzeige
Anzeige
$(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?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

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

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

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

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

Antworten
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

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige