Unable to get text overlay carousel cycle2

Question

I am trying to get a cycle2 carousel that works with text overlays in wordpress. Images are displayed only vertically. I can only get the basic demo of cycle2, not a carousel. Here is my 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.imtqy.com/images/beach1.jpg"></a>
        <a href="http://google.com" data-cycle-title="two" data-cycle-desc="second description"><img src="http://malsup.imtqy.com/images/beach2.jpg"></a>
        <a href="http://google.com" data-cycle-title="three" data-cycle-desc="third description"><img src="http://malsup.imtqy.com/images/beach3.jpg"></a>
        <a href="http://google.com" data-cycle-title="four" data-cycle-desc="fourth description"><img src="http://malsup.imtqy.com/images/beach4.jpg"></a>
       <a href="http://google.com" data-cycle-title="five" data-cycle-desc="fifth description"><img src="http://malsup.imtqy.com/images/beach5.jpg"></a>
       <a href="http://google.com" data-cycle-title="six" data-cycle-desc="sixth description"><img src="http://malsup.imtqy.com/images/beach6.jpg"></a>
       <a href="http://google.com" data-cycle-title="seven" data-cycle-desc="seventh description"><img src="http://malsup.imtqy.com/images/beach7.jpg"></a>
       <a href="http://google.com" data-cycle-title="eight" data-cycle-desc="eight description"><img src="http://malsup.imtqy.com/images/beach8.jpg"></a>
       <a href="http://google.com" data-cycle-title="nine" data-cycle-desc="ninth description"><img src="http://malsup.imtqy.com/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');
}

Answer 1

If your main slideshow works, but not a carousel, you are missing the Cycle2 Carousel plugin, which is necessary for the desired functionality. Find it on the Cycle2 download page

http://malsup.imtqy.com/min/jquery.cycle2.carousel.min.js

EDIT

The correct way to queue scripts is to take care of the dependencies in the parameters wp_enqueue_script().

, , . , script.

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' );

, , html , .

Answer 2

, . , jquery.cycle2.js, jquery.cycle2.carousel.js. JSfiddle: http://jsfiddle.net/omikey/3jsLsrch/1/