Zyklus2-Karussell kann nicht mit Textüberlagerung zum Laufen gebracht werden

Ich versuche, das cycle2-Karussell mit Textüberlagerungen in WordPress zum Laufen zu bringen. Die Bilder werden nur vertikal angezeigt. Ich kann nur die Basis-Cycle2-Demo zum Laufen bringen und nicht das Karussell. Hier ist mein Code:

    <div class="cycle-slideshow" 
        data-cycle-fx="carousel"
        data-cycle-timeout="0"
        data-cycle-next="#next4"
        data-cycle-prev="#prev4"
        data-cycle-carousel-visible="5"
        data-allow-wrap="false"
    data-cycle-slides="> a"
      >
    <div class="cycle-overlay"></div>
        <a href="http://google.com" data-cycle-title="first" data-cycle-  desc="first description"><img src="http://malsup.github.io/images/beach1.jpg"></a>
        <a href="http://google.com" data-cycle-title="two" data-cycle-desc="second description"><img src="http://malsup.github.io/images/beach2.jpg"></a>
        <a href="http://google.com" data-cycle-title="three" data-cycle-desc="third description"><img src="http://malsup.github.io/images/beach3.jpg"></a>
        <a href="http://google.com" data-cycle-title="four" data-cycle-desc="fourth description"><img src="http://malsup.github.io/images/beach4.jpg"></a>
       <a href="http://google.com" data-cycle-title="five" data-cycle-desc="fifth description"><img src="http://malsup.github.io/images/beach5.jpg"></a>
       <a href="http://google.com" data-cycle-title="six" data-cycle-desc="sixth description"><img src="http://malsup.github.io/images/beach6.jpg"></a>
       <a href="http://google.com" data-cycle-title="seven" data-cycle-desc="seventh description"><img src="http://malsup.github.io/images/beach7.jpg"></a>
       <a href="http://google.com" data-cycle-title="eight" data-cycle-desc="eight description"><img src="http://malsup.github.io/images/beach8.jpg"></a>
       <a href="http://google.com" data-cycle-title="nine" data-cycle-desc="ninth description"><img src="http://malsup.github.io/images/beach9.jpg"></a>
</div>

 <div class=center>
    <a href=# id=prev4><< Prev </a>
    <a href=# id=next4> Next >> </a>
 </div>


/* overlay */
.cycle-overlay { 
        position: absolute;
    bottom: 0;
    width: 150px;
    max-width: 800px;
    z-index: 600;
        background: black;
    color: white;
  }


  function my_scripts_method1() {
      wp_register_script('my-script1', get_stylesheet_directory() . '/js/jquery.cycle2.min.js',array('jquery'));
   if ( is_page('home') ){   
    wp_enqueue_script('my-script1');
}
 }
 function my_scripts_method2() {
 wp_register_script('custom-script', get_stylesheet_directory() . '/js/jquery.cycle2.carousel.min.js',array('jquery'));

    if ( is_page('home') ){ 
    wp_enqueue_script('custom-script');
}
  }

  if ( !is_admin() ) {
    add_action('wp_enqueue_scripts','my_scripts_method1');
    add_action('wp_enqueue_scripts','my_scripts_method2');
}

Das scheint bei mir gut zu funktionieren. Überprüfen Sie noch einmal, ob Sie enthalten sind jquery.cycle2.js ebenso gut wie jquery.cycle2.carousel.js. JSfiddle: http://jsfiddle.net/omikey/3jsLsrch/1/

Wenn Ihre einfache Diashow funktioniert, aber nicht das Karussell, muss Ihnen das Cycle2 Carousel-Plugin fehlen, das für Ihre gewünschte Funktionalität erforderlich ist. Finden Sie es auf der Cycle2 Download-Seite

http://malsup.github.io/min/jquery.cycle2.carousel.min.js

BEARBEITEN

Der richtige Weg, Skripte in die Warteschlange einzureihen, besteht darin, sich um Abhängigkeiten in der zu kümmern wp_enqueue_script() Parameter.

Sie können alle Skripts mit einer einzigen Aktion direkt in die Warteschlange einreihen, ohne die Skripts separat registrieren zu müssen. Der folgende vereinfachte Code löst Ihr Problem, indem er die Skriptabhängigkeiten zum richtigen Zeitpunkt einbezieht.

function my_scripts_method() {
    $template_dir = get_template_directory_uri();
    if ( is_page('home') ){
        wp_enqueue_script( 'cycle2', $template_dir . '/js/jquery.cycle2.min.js',array( 'jquery' ) );
        wp_enqueue_script( 'cycle2-carousel', $template_dir . '/js/jquery.cycle2.carousel.min.js', array( 'jquery', 'cycle2' ) );
    }
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Um zu überprüfen, ob beide Skripts in die Warteschlange gestellt werden, können Sie den HTML-Quellcode der gerenderten Seite überprüfen.