Cycle2 Carousel 不应更改上一个/下一个操作的活动幻灯片

Question

图片库喜欢这里：

我正在创建图片中的照片库。它应该有以下选项：当单击缩略图行上的下一个/上一个按钮时，拇指应该移动一个位置，但移动拇指不应该改变大照片。我用 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 上更改“.cycle-slide-active”。可以用当前插件解决这个问题吗？

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，因为底部轮播中只有 8 张图片可见。但希望这会有所帮助。

$('#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/