jQuery Cycle2 - 轮播寻呼机导航

Question

我正在使用Cycle2的旋转木马寻呼机，与这里的例子非常相似。

我的问题是上一个和下一个滑块工作正常，但单击轮播不会更改另一个滑块中的幻灯片。它在上面链接的 Cycle2 示例中工作。

检查小提琴中的 JS：

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

示例中的 CSS 已损坏，但没关系，您可以看到问题所在。如果您单击下一步，它会循环，但单击轮播中的图像不会更改滑块。

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

[cycle2] goto: invalid slide index

Answer 1

我意识到我参加聚会有点晚了，但我想我会分享我自己的解决方案，该解决方案适用于data-cycle-allow-wrap设置为true

这里有2个问题。第一种是当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()并从 data 属性获取索引，而不是从插件返回的内容：

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

Answer 2

我用两种方式解决了这个问题（几乎...

1. 通过将data-cycle-allow-wrap="false"添加到轮播寻呼机容器。 现在看来，这已经是充分的证据了，

2. 我开始通过从演示页面更改标准 jQuery 来获得无限寻呼机的结果

     var slideshows = $('#gallbig');
     var adjust = slideshows.children('img').length;
     $('#no-template-pager .cycle-slide').click(function(){
         var index = $('#no-template-pager').data('cycle.API').getSlideIndex(this);
         slideshows.cycle('goto', index - adjust);
     });
   

但是

一旦它环绕起来就会失败，因为我不需要我使用选项一的功能，但是如果您追求无限轮播，这可能会让您入门。

注意，我现在使用的第一个修复程序具有相同的jQuery代码段，没有调整变量。

Answer 3

我只是在与自己的轮播寻呼机作斗争后看到了这一点，所以这是我所做的，希望它对那里的人有所帮助：（一些代码取自 Cycle2 网站上的寻呼机轮播示例）

$(document).ready(function(){
    // Cycle2 Slider:
    var slideshows = $('.cycle-slideshow');//selects both slideshows
    slideshows.on('cycle-next cycle-prev', function(e, opts) {
        // advance the other slideshow
        slideshows.not(this).cycle('goto', opts.currSlide);
    });
    $('.carousel .cycle-slide').click(function(){
        var index = $('.carousel').data('cycle.API').getSlideIndex(this);
        var slide_count = $('.carousel').data("cycle.opts").slideCount;
        // subtract the slide amount until the slide count is within bounds:
        while(index > slide_count) {
            index = index - slide_count;
        }
        slideshows.cycle('goto', index);
    });
});