jQuery Cycle2 - 轮播寻呼机导航

Question

我正在使用Cycle2的Carousel寻呼机,这里的示例非常类似于设置.

我的问题是前一个和下一个滑块工作正常,但点击旋转木马不会改变另一个滑块中的幻灯片.它在上面链接的Cycle2示例中工作.

检查小提琴中的JS:

http://jsfiddle.net/yCCLL/1/

示例中的CSS已被破坏但无关紧要,您可以看到问题所在.如果单击下一步它循环但单击轮播中的图像不会更改滑块.

我总是在控制台中收到错误消息:

[cycle2] goto: invalid slide index

Answer 1

我意识到我有点迟到了,但我想我会分享我自己的解决方案,它与data-cycle-allow-wrapset一起工作true

这里有两个问题.第一个是data-cycle-allow-wrap设置为true重复的幻灯片时,永远不会通过.click()回调函数

其次,正如Blazemonger所提到的,复制会丢弃每张幻灯片的索引

解决方案

首先,我在我的标记中的每张幻灯片上设置一个"索引"数据属性,如下所示.当插件复制幻灯片时,它会同时获取数据属性

<?php 
    $i = 0; 
    foreach($images as $image) { 
        echo '<img class="cycle-slide" data-index="' . $i . '" src="' . $image . '" />';
        $i++;

    } 
?>

然后在JavaScript中而不是使用.click()我使用的方法.on()利用事件委托并从数据属性获取索引而不是从插件返回的内容:

$('#cycle2').on('click', '.cycle-slide', function(){
    $('#cycle1').cycle('goto', $(this).data('index'));
});