slick.js – the last carousel you’ll ever need. Der Slider bei dem der Name zum Programm wird. Mit einfachen und übersichtlichen Mitteln und sehr schönem Code zum eigenen Carousel. Egal ob mit Bilder, Text oder anderen Inhalten.
Warum sagt slick.js von sich selbst, dass es das letzt Carousel ist, dass man jemals brauchen wird? Die Frage ist – können die dass wirklich von sich behaupten? Ich für meinen Teil kann diese Frage mit einem definitiven Ja beantworten. Dieses kleine aber feine Stück Code macht es für jeden Webentwickler einfach und unkompliziert ein Carousel mit Inhalt auf zu bauen. Das schöne dabei, der Inhalt ist völlig egal. Er ist nicht, wie bei vielen anderen, nur auf Bilder beschränkt. Es kann einfach alles in den Slider gepackt werden.
Doch genug gelobt. Nun wollen wir uns auch mal anschauen ob man denn wirklich so schnell einen eigenen Slider aufbauen kann.
Dateien herunterladen:
Als erstes muss slick.js heruntergeladen werden und sowohl die *.css als auch die *.js in die Webseite importiert werden:
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
<script src="js/slick.js" type="text/javascript" charset="utf-8"></script>
Wichtig ist dabei darauf zu achten, dass vor dem Import des slick.js bereits jQuery importiert wurde.
Hier geht zur Webseite mit Beispielen: http://kenwheeler.github.io/slick/
Nach dem Import der benötigen Dateien ist eigentlich schon fast alles vorbereitet um den Slider aufzubauen. Für den Slider werden nur wenige, einfache HTML Elemente benötigt. slick.js kümmert sich zur Laufzeit dann selbst um alles drum herum. Hier ein kleines Beispiel wie es auch auf der Webseite von slick.js zu finden ist:
<section class="regular slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
</section>
Das war auch schon alles, was wir benötigen um einen Slider mit ingesammt 6 Flächen darzustellen. Auf jeder dieser Flächen wird im Moment ein Bild über den Service von Placehold.it geladen und dargestellt. Nun muss der Slider selbst noch initiiert werden. Dabei können unterschiedliche Parameter genutzt werden um einzelne Funktionen zu- oder abzuschalten. Hier ein Beispiel wie es auch auf der slick.js Webseite zu finden ist:
$('.variable-width').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
Ein Beispiel, speed: 300 stellt die Slidergeschwindigkeit ein, dots: true blendet die kleinen Punkte unterhalb der Slider als Übersicht ein oder mit dots: false aus.
Beispiel:
Hier ein Beispiel wie unser Slider nun aussehen könnte ( Bild als Screenshot von: http://kenwheeler.github.io/slick/)
Wollten wir nun aber gar keinen Slider mit Bildern sondern mit Inhalten können wir ganz einfach die <img>-Tags aus dem Beispiel durch einfache <divs>-Tags mit Inhalten ersetzten. Es können kleine Content-Blöcke mit einzelnen <divs>, <buttons>, <spans> und allem anderen genutzt werden. slick.js kümmert sich um den Rest. Möchte man eigenen Inhalt in die einzelnen Slides packen ist es wichtig den Grundrahmen, also das <div> entsprechend zu stylen und mit den benötigten Parametern zu versehen.
Durch Anpassung im slick-theme.css können einzelne Klassen umgestyled werden. Beispielsweise die Pfeile rechts und links neben dem Slider. Oder auch das aussehen der Punkte unterhalb der Slides.
Beispielsweise die Pfeile über die Klassen .slick-prev:before und .slick-next:before oder die Punkte durch die Klasse .slick-dots li
Als Fazit bleibt nur zu sagen, meiner Meinung nach, kann sich slick mit gutem recht den Titel the last carousel you’ll ever need geben.