Ich bin seit ein paar Jahren großer Fan von Slick. Die Slideshow ist gut konfigurierbar und kann vielseitig eingesetzt werden.
Für mein aktuelles Projekt brauchte ich eine Möglichkeit die Slideshow zu stoppen und einen Indikator, ob die Slideshow im Autoplay läuft.
Ich habe also einen einfachen Button erstellt, ihn dann mit CSS so gestaltet, dass er von Play zu Pause transformiert und dieses JavaScript eingesetzt:
$('#stage-slideshow-playpause').on('click', function() {
if($(this).hasClass('play')) {
$(this).removeClass('play').addClass('pause');
$('#stage-slideshow').slick('slickPause');
} else {
$(this).removeClass('pause').addClass('play');
$('#stage-slideshow').slick('slickPlay');
}
});
$('#stage-slideshow .slide').on('mouseenter.slick', function () {
$('#stage-slideshow-playpause').removeClass('play').addClass('pause');
});
$('#stage-slideshow .slide').on('mouseleave.slick', function () {
$('#stage-slideshow-playpause').removeClass('pause').addClass('play');
});
Im ersten Block kann man die Slideshow mit dem Button steuern, in den nächsten Abschnitten “reagiert” der Button auf externe Veränderung der Slideshow. Voraussetzung ist, dass die Option pauseOnHover aktiviert ist. Es gibt noch die Option pauseOnDotsHover, falls diese Option an ist, müsste man den Code entsprechend erweitern.
