Owl Carousel Navigation wird nicht angezeigt

Manchmal ist die Lösung so einfach...

    Inhaltsangabe
  1. Die Lösung
    1. Methoden, um Owl Carousel einzubinden
    2. Der Fehler
  2. Alternativer Lösungsvorschlag

Ich hatte einmal das Problem, dass der Kunde mit telefonisch mitgeteilt hat, dass die Navigationselemente des carousels auf seiner Webseite nicht mehr angezeigt werden. Das seltsame an der Geschichte war, dass es beim Go-Live funktionierte und jetzt auf einmal nicht mehr ging.

Also habe ich gegoogelt und einige Lösungsvorschläge getestet.

  • Ich habe html Klassen geändert
  • Css Dateien manipuliert
  • owl.carousel.js Datei geändert
  • nav:true zu navigation:true geändert
  • Geprüft, ob es vielleicht ein Update gibt

Am Ende habe ich mir dann die Javascript Dateien angesehen….

Die Lösung

Methoden, um Owl Carousel einzubinden

Man hat zwei Methoden, um Owl Carousel einzubinden. Diese zwei Methoden gelten eigentlich für beinahe jedes jQuery Plugin, das man benutzt, um eine Webseite um bestimmte Funktionen zu erweitern.

  1. Man bindet direkt das ganze Plugin ein und alle Funktionen sind sofort verfügbar.
  2. Man beschäftigt sich näher mit dem Plugin und bindet nur die nötigen js und css Dateien ein, um Datentransfer zu sparen und am Ende nur die Funktionen zu nutzen, die man wirklich benötigt.

Die zweite Methode macht nur Sinn, wenn man ein ,,Programm“ zwischenschaltet, welches sich am Ende darum kümmert, dass alle js und css Dateien zusammengeführt und minifiziert werden. Ich benutze z.B. Grunt zur Realisierung der Webseiten und dort benutze ich den Concat Task, um meine Javascript Dateien zusammen zu führen.

Der Fehler

Seit dem letzten Update hatte ich mich dazu entschieden, alle owl carousel Dateien einzeln zu behandeln und in die Haupt Javascript Datei zusammen zu führen. Das bedeutet, dass ich folgende Dateien im owlcarousel Ordner habe:

  • owl.animate.js
  • owl.autoheight.js
  • owl.autoplay.js
  • owl.autorefresh.js
  • owl.carousel.js
  • owl.hash.js
  • owl.lazyload.js
  • owl.navigation.js
  • owl.support.js
  • owl.support.modernizr.js
  • owl.video.js

Hiervon waren nur folgende Dateien in die Haupt Javascript Datei geschrieben:

  • owl.carousel.js
  • owl.lazyload.js

Fällt euch etwas auf? Die owl.navigation.js fehlt. Also habe ich diese auch hinzugefügt und die Navigation wurde wieder wie gewohnt angezeigt. Falls ihr also nicht direkt die gesamte Owl Carousel js reinladet, solltet ihr prüfen, ob die owl.navigation.js reingeladen wurde.

Alternativer Lösungsvorschlag

Wenn euch das nicht weiter geholfen hat, solltet ihr mal nachschauen, ob genügend Elemente vorhanden sind. Es gibt z.B. Leute, die nur ein oder zu wenige Elemente anzeigen lassen, und die Loop Funktion aktiviert haben. Da wird dann die Navigation ebenfalls nicht angezeigt. Ihr solltet in diesem Falle testen, ob die Navigation angezeigt wird, wenn ihr zwei Elemente hinzugefügt habt, oder mehr Elemente einbindet, als angezeigt wird.

Themen

Grunt Javascript jQuery Owl Carousel Technik

Beitrag teilen

WhatsAppen

Folgen Sie uns