/ / Verwenden von Orbit Slider mit Reverie WordPress Framework - Javascript, Jquery, WordPress, Zurb-Stiftung, Orbit

Verwenden von Orbit Slider mit Reverie WordPress Framework - Javascript, jquery, WordPress, Zurb-Stiftung, Orbit

Ich versuche das zu benutzen Orbit Slider mit Reverie WordPress-Framework.

Ich habe das Grundformat verwendet, um den Orbit Slider so einzurichten, wie er in der Orbit-Dokumentation zur Verfügung gestellt wird:

<ul class="example-orbit" data-orbit>
<li>
<img src="/images/../assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li class="active">
<img src="/images/../assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="/images/../assets/img/examples/launch-orbit.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>

Aber ich kann es scheinbar nicht funktionieren lassen.

Ich habe die folgenden Skripte verwendet:

    wp_enqueue_script( "jquery" );
wp_enqueue_script( "foundation-js" );
wp_enqueue_script( "fastclick-js" );
wp_enqueue_script( "masonry-js" );
wp_enqueue_script( "html5shiv" );

Und habe die Dummköpfe von der Fußzeile aus genannt:

    <script>
(function($) {
$(document).foundation();
})(jQuery);
</script>

Muss ich den Orbit Slider auch von der Fußzeile aus aufrufen:

    $(document).foundation("orbit", "reflow");

Ich habe das auch getan, aber es hat nicht funktioniert.

Außerdem benutzte ich die Standard-Jquery, die mit WordPress geliefert wurde, aber das funktionierte auch nicht, also benutze ich die jquery version 2.1.0.

Ich habe benutzt foundation.min.js. Also denke ich nicht, dass ich anrufen muss orbit.foundation.js nicht mehr. Ist das nicht richtig?

Was passiert, ist auch, dass das erste Bild zeigtund das Autoplay startet, wenn ich auf den nächsten Pfeil oder den vorherigen Pfeil klicke, aber das Bild wird nicht verschoben. Ich habe gesehen inspect Element von Chrome, dass die HTML von Orbit korrekt gerendert wird und die CSS und JS Dateien alle aufgerufen werden oder nicht. Sie sind alle in Ordnung. Der Schieberegler zeigt korrekt mit allen Steuerelementen, aber die Bilder nicht gleiten.

Fehle ich hier etwas? Bitte helfen Sie.

N.B.

Versuchte andere Schieberegler (Owl Carousel Slider) auch. Scheint, dass keiner wie beabsichtigt funktioniert.

Antworten:

0 für die Antwort № 1

Ich habe es behoben, indem ich foundation.js anstelle von foundation.min.js verwendet und dann die Datei foundation.orbit.js hinzugefügt habe. Vielleicht kann es einen Fehler geben, der von foundation.min.js verursacht wurde.