Artikel-Hilfsmenü
Montag, 28. Mai 2018 – aktualisiert am Sonntag, 15. Dezember 2019
Slick: Karussel Slider
Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.
"Slick – the last carousel you'll ever need"
So wird das Slider-Script Slick beworben. Und ich tendiere dazu, dieser Aussage zuzustimmen. Slick ist ein Juwel. Es ist extrem flexibel konfigurierbar, akzeptiert praktisch jeglichen Inhalt für die einzelnen Slides, und erzeugt valides HTML.
Einige Features, die in dieser Demo realisiert sind:
- Beliebige Inhalte möglich: Bilder, Text, Text zum Bild (Bildbeschreibungen), Videos, PDF, gemischte Inhalte, usw.
- Auf Touchscreens: Wischen zum Blättern
- Responsive – selbstverständlich!
- Barrierefrei: mit Tastatur und / oder Screen Reader bedienbar
- Variable oder fixe Höhe der Inhalte. Fix = Höhe richtet sich nach dem höchsten Slide.
Demo
Der Slider – ein Bereich mit wechselnden Inhalten, z.B. Bilder. Es empfielt sich, mit dem folgenden Button "Animation anhalten" die Animation zu deaktivieren, weil der Bildwechsel sonst eventuell schneller erfolgt, als die Alternativtexte gelesen werden. Mit den darauf folgenden Buttons "vorwärts" und "zurück" kann manuell durch die Inhalte/Slides geblättert werden. Der (wechselnde) Inhalt befindet sich unterhalb der Buttons.
Bildbeschreibung: Ein Kanal, links und rechts malerische, typisch italienische Häuser in unterschiedlichen Farben, überwiegend gedeckte Rottöne, aber auch schlammfarbene und gedeckt weiße Fassaden gibt es vereinzelt. Auf beiden Seiten des Kanals liegen Boote vertäut. Nur auf der linken Seite gibt es einen Gehsteig und Häuser mit Arkaden, rechts grenzen die Häuser unmittelbar an den Kanal.
Slide Nr. 3: Dieser Slide beinhaltet nur Text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
Natürlich kann auch unter / über einem Video beliebiger weiter Inhalt ins Slide eingefügt werden, z. B. Text.
Und jetzt ein PDF
Hinweis: Auf Smartphones (und iPad) wird das PDF nicht als Slide angezeigt. Um die Anzeige zu erzwingen den folgenden Download-Link benutzen.
Damit Screen Reader die Änderungen automatisch ansagen (natürlich nur, wenn der Fokus auf der Animation steht), musste ich das JavaScript (jQuery) um eine Kleinigkeit erweitern:
$( ".slick-class" ).focusin(function() {
$(this).attr('aria-live','polite');
});
$( ".slick-class").focusout(function() {
$(this).removeAttr('aria-live');
});
Der Button zum Anhalten der Animation ist nach WCAG 2.0 sowie BITV 2.0 Richtlinie 2.2.2 Stufe A erforderlich. Das erfordert natürlich ein paar Zeilen zusätzlichen Code, aber im Ergebnis stört dieses Feature sicherlich niemanden.
… und hier gibt es noch eine Demo einer automatisch ablaufenden Slideshow – ohne Eingriffsmöglichkeit durch den User:
Demo 2
sowie die Demo einer Slideshow mit Vorschaubildern, mit dem Look & Feel einer (Powerpoint-) Präsentation:
Demo 3
Die beiden Demos zeigen die Bandbreite der Möglichkeiten von Slick, quasi als Beleg für das eingangs gemachte Statement: "Slick – the last carousel you'll ever need".
Original-Script Lizenz: MIT
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.