2

ここのようなフォトギャラリー：http://jquery.malsup.com/cycle2/demo/caro-pager.php

画像のようなフォトギャラリーを作成しています。次のオプションが必要です: サムネール行の次/前のボタンをクリックすると、サムは 1 つの位置だけ移動する必要がありますが、サムを移動しても大きな写真は変更されません。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);
});

ただし、サムネイル行の前/次のボタンをクリックすると、アクティブなスライドが常に親指で変更されます。したがって、1 つのアクティブな大きなスライドと他のアクティブな親指があります (それらは同じではありません)。親指の前/次で「.cycle-slide-active」が変更されないようにする必要があります。これは現在のプラグインで修正できますか?

4

1 に答える 1

0

いつ電話する必要があるidかを確認する必要があります。cycle-1cyclecycle-1cycle-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/

于 2014-01-03T22:33:41.737 に答える