我正在尝试让cycle2轮播与wordpress中的文本叠加一起工作。图像只是垂直显示。我只能让基本的 Cycle2 演示工作,而不能让轮播工作。这是我的代码:
<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');
}
最佳答案
这似乎对我很有用。仔细检查您是否包含 jquery.cycle2.js
以及 jquery.cycle2.carousel.js
。 JSfiddle:http://jsfiddle.net/omikey/3jsLsrch/1/
关于jquery - 无法让 Cycle2 轮播与文本叠加一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31232448/