jquery - jQuery Cycle2 - 轮播页面导航

Question

我正在使用 Cycle2 的 Carousel 寻呼机，设置与此处的示例非常相似。

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

检查小提琴中的JS：

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

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

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

[cycle2] goto: invalid slide index

Answer 1

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

这里有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()，利用事件委托并从数据属性而不是从插件返回的内容获取索引：

$('#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);
    });

});