jquery - Not able to get cycle2 carousel working with text overlay -


i trying cycle2 carousel working text overlays in wordpress. images being displayed vertically. can basic cycle2 demo work , not carousel. here 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'); } 

this seems working me fine. double check including jquery.cycle2.js jquery.cycle2.carousel.js. jsfiddle: http://jsfiddle.net/omikey/3jslsrch/1/


Comments

Popular posts from this blog

c# - Better 64-bit byte array hash -

webrtc - Which ICE candidate am I using and why? -

php - Zend Framework / Skeleton-Application / Composer install issue -