jQuery Cycle2 - 轮播页面导航答案

【问题标题】：jQuery Cycle2 - Carousel pager navigationjQuery Cycle2 - 轮播页面导航
【发布时间】：2016-05-13 21:48:33
【问题描述】：

我正在使用 Cycle2 的 Carousel 寻呼机，与example here 的设置非常相似。

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

检查小提琴中的JS：

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

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

[cycle2] goto: invalid slide index

【问题讨论】：

如果您查看轮播对 DOM 所做的修改，您会发现您的幻灯片包含原始图像集的三份副本，这与您的数字无关。
感谢您的回复。我注意到，cycle2 的开发人员表示，轮播创建的幻灯片数量是实际存在的幻灯片的 3 倍。那么如何将它们与正在创建的这些额外幻灯片链接在一起呢？

标签： jquery html jquery-cycle2

【解决方案1】：

我意识到我参加聚会有点晚了，但我想分享我自己的解决方案，该解决方案适用于 data-cycle-allow-wrap 设置为 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() 利用 event delegation 并从数据属性而不是从插件返回的内容中获取索引：

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

【讨论】：

感谢您，这是轮播寻呼机和无限循环的绝佳解决方案。

【解决方案2】：

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

通过将data-cycle-allow-wrap="false" 添加到轮播寻呼机容器中。这似乎是充分的证据，

我通过从演示页面更改标准 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 sn-p，但没有调整变量。

【讨论】：

我将标记数字 1 作为答案。感谢那。我以为我实际上已经尝试过了，但我一定有其他问题。干得好！
太棒了，我看到有几个人为此苦苦挣扎 - 很多时候是因为他们在数据属性中遗漏了 -cycle-。

【解决方案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);
    });

});

【讨论】：