Ein Slider für alle Fälle: Slick ist das jQuery-Carousel, das du wirklich brauchst
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: 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
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
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.
Schick! Gleich mal testen.
Owl Carousel kann ziemlich das gleiche und sogar noch etwas mehr (oder anderes).
Ich teste ja gerade das folgende: http://tympanus.net/Development/ArrowNavigationStyles/
Also das Owl Carousel gefällt mir sogar einen Tick besser als Slick. Danke für den Tipp.
45KB sind für einen Slider aber definitiv zu viel.
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?