Jquery 自行车2旋转木马'；t在上一步/下一步操作中更改活动幻灯片

照片库如下：

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

您需要确保当

id

是

cycle-1

时，您只需要调用

cycle-1

，就像调用

cycle-2

一样

改变

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

到

范例

更新

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

更新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');        
});

$（“#循环-2.循环幻灯片”）。单击（函数（）{
var指数=$（'#cycle-2'）。数据（'cycle.API'）。getSlideIndex（本）；
$（#cycle-1'）。cycle（'goto'，index）；
});
$（#cycle-1'）。on（'cycle-update-view'，函数（e，opts）{
如果（opts.currside

---

您能否创建一个演示该问题的示例？这可能是一个很好的起点，因为它已经加载了

jquery-cycle2

：代码在这里：感谢您的帮助，我将在几天后对此进行调查。@Olga请将此答案标记为已接受，如果它解决了您的问题或提供了反馈。（你可以点击我答案左边的白色复选标记，将答案标记为已接受。）谢谢你，@Trevor，但这并不完全是我的意思。拇指上的上一个/下一个操作即使使用我的代码也不会改变大图像。但我需要的是，在单击“拇指中的上一页/下一页”时，不要更改活动的“拇指中的幻灯片”。现在，“可见”的第一个幻灯片始终处于活动状态。我想这个插件总是这样做的，也许我应该为这个功能应用另一个插件。谢谢，这适用于prev/next on thumbs。但“大图”上的上一页/下一页应更改活动拇指。这是个问题，太好了！这才是我真正需要的！非常感谢，@Trevor！！

$('#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');        
});