jquery - Cycle2 轮播不应更改上一个/下一个操作的事件幻灯片

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

但是现在，当单击缩略图行上的上一个/下一个按钮时 - 它总是会更改缩略图中的事件幻灯片。所以我有一个事件的大幻灯片和其他事件的拇指(它们不一样)。我需要防止在拇指上的上一个/下一个上更改“.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 个图像中只有 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/