Cycle2旋转木马不应更改prev/next操作上的活动幻灯片

Question

像这里这样的照片画廊：

​

我正在创建像在图片中这样的图片库。它应该有以下选项:当单击缩略图行上的next/prev按钮时，拇指应该移动一个位置，但是移动拇指不应该更改大照片。我用Cycle2实现它，并以这样的方式初始化它：

var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
    if($(this).attr('id') == 'cycle-1'){
        slideshows.not(this).cycle('goto', opts.currSlide);
    }
});

$('#cycle-2 .cycle-slide').click(function(){
    var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
    slideshows.cycle('goto', index);
});   

但是现在，当单击缩略图行上的prev/next按钮时，它总是会在缩略图中更改活动幻灯片。因此，我有一个积极的大幻灯片和其他活动拇指(他们是不一样的)。我需要防止在prev/next上更改“.循环-幻灯片-活动”。这能用当前的插件来修复吗？

Answer 1

您需要确保当id是cycle-1时，只需要在cycle-1上调用cycle，如果是cycle-2，就像您所做的那样

变化

if($(this).attr('id') == 'cycle-1'){
slideshows.not(this).cycle('goto', opts.currSlide);
}

至

if($(this).attr('id') == 'cycle-1'){
    $(this).cycle('goto', opts.currSlide);
}

示例

http://jsfiddle.net/pzPXE/12/

更新

$('.cycle-slide-active').removeClass('cycle-slide-active'); 
$('#cycle-2').on('cycle-update-view', function(e, opts) {
    $('.cycle-slide-active').removeClass('cycle-slide-active'); 
});

http://jsfiddle.net/pzPXE/13/

更新2

我不得不修改一下你的css，因为在下面的旋转木马中只有7张是可见的。但希望这会有所帮助。

$('#cycle-2 .cycle-slide').click(function(){
        var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
        $('#cycle-1').cycle('goto', index);
    });
    $('#cycle-1').on('cycle-update-view', function(e, opts) {
        if(opts.currSlide < slides-slidesVisible ){
            $('#cycle-2').cycle('goto', opts.currSlide);
        }   
        else
            $('#cycle-2').cycle('goto', slides-slidesVisible);            
        currentSlide = opts.currSlide;
        $('#cycle-2 .cycle-slide-active').removeClass('cycle-slide-active');
        $('#cycle-2 .cycle-slide').eq(currentSlide+1).addClass('cycle-slide-active');
    }); 
    $('#cycle-2').on('cycle-update-view', function(e, opts) {
        $('#cycle-2 .cycle-slide-active').removeClass('cycle-slide-active');
        $('#cycle-2 .cycle-slide').eq(currentSlide+1).addClass('cycle-slide-active');        
});

http://jsfiddle.net/pzPXE/16/