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
Post a Comment