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致电cycle-1，就像您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/

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

1 个答案: