Question

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

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

检查小提琴中的JS：

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

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

[cycle2] goto: invalid slide index

Answer 1

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

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

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

解决方案

首先我设置一个＆＃34;索引＆＃34;我的标记中每张幻灯片上的数据属性如下所示。当插件复制幻灯片时，它会同时获取数据属性

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

    } 
?>

然后在JavaScript中而不是使用.click()方法，我使用.on()利用event delegation并从数据属性获取索引而不是从插件返回的内容：< / p>

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

Answer 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代码段，而没有adjust var。

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);
    });

});

jQuery Cycle2 - 轮播寻呼机导航

3 个答案: