FlexSlider: Endlosschleife auf Touchgeräten verhindern

Image-Slider sind ein häufig eingesetztes Webdesignelement um Fotos, Produkte oder das eigene Unternehmen ansprechend und platzsparend auf einer Website zu präsentieren. Inzwischen erfreuen sich Slider scheinbar bei vielen Websitebetreibern steigender Beliebtheit. Allerdings haben viele einen entscheidenden Nachteil: Sie sind oftmals nicht auf responsive Webdesign ausgelegt, das heißt der Slider kann sich nicht automatisch an die unterschiedlichen Bildschirmgrößen anpassen. Da jedoch mittlerweile Google mehr mobile Suchanfragen als über Desktops erhält, wird gerade die Anpassung der eigenen Webseite auf die unterschiedlichen Bildschirmgrößen immer wichtiger. Daher wurden in letzten Zeit diverse neue, flexible Image-Slider entwickelt. Einer davon ist der FlexSlider. Er bietet jede Menge Anpassungen wie zum Beispiel horizontale/verticale Scroll Effekte und erlaubt Bildunterschriften. Des Weiteren unterstützt der FlexSlider die beliebten Touch-Gesten für Smartphones und Tablets. Dadurch ist es möglich, mit nur einem „Wisch“ zwischen den Bildern hin und her zu sliden. Und das wichtigste natürlich: Er passt sich automatisch an die Bildschirmauflösung des Nutzers an, ob dieser nun mit dem Smartphone surft oder am Rechner sitzt. Unterstützt werden die mobilen Betriebssysteme iOS und Android.

Trotz der positiven Punkte ärgern sich jedoch seit längerem die Entwickler von FlexSlider über einen markanten Bug (=Fehler im System), welcher nach der Einbindung auf der gewünschten Seite bei Touchgeräten eine unendliche Schleife erzeugt, obwohl nur ein Slide vorhanden ist. Demnach wird das einzig vorhandene Bild-Element immer und immer wieder eingeblendet.

[GELÖST] mit der jQuery Funktion

Wir haben uns dem Problem angenommen und eine passende Lösung gefunden. Mittels der jQuery Funktion $.size() kann die Gesamtzahl der Slides gezählt und anschließend eine Abfrage erzeugt werden. Die Abfrage ergibt, wenn weniger als ein Slide vorhanden ist, „False“, deaktiviert die Schleife und behebt somit das Problem.

Code:

(function($){
$(function(){
var element = $(‚.flexslider‘);
var total = element.children(‚li‘).size();

element.flexslider({
animationLoop: (total <=1)? false : true
});
});
})(jQuery);
Und siehe da, Problem gelöst! Das war schon das ganze Hexenwerk. Der Slider sollte nun keine Endlosschleife mehr erzeugen, sofern zu dem jetzigen Zeitpunkt, wie in unserem Fall, nur ein Bild-Element vorhanden ist.

Wenn auch ihr Schwierigkeiten mit dem FlexSlider haben solltet, dann probiert doch einmal den obigen Code aus. Falls der Code nicht richtig funktioniert oder ihr eine noch bessere, einfachere Lösung habt, dann lasst es uns mit einem Kommentar in der unten stehenden Box wissen!

Hinterlasse einen Kommentar