Cycle2 Carousel shouldn't change active slide on prev/next action

Question

Photo gallery like here:

I'm creating photo gallery of such a kind as in the image. It should have the following option: when clicking next/prev button on thumbnail row thumbs should move by one position but moving the thumbs should not change the big photo. I make it with Cycle2 and I initialize it in this way:

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

But now when clicking on prev/next buttons on thumbnails row - it always changes active slide in thumbs. So I have one active big slide and other active thumbs (they are not the same). I need to prevent changing of ".cycle-slide-active" on prev/next on thumbs. Can this be fixed with the current plugin?

Answer 1

You need to make sure that when the id is cycle-1 you need to call cycle on only cycle-1 like your doing if it's cycle-2

Change

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

To

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

Example

http://jsfiddle.net/pzPXE/12/

Update

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

Update 2

I had to modify your css a little bit because only 7 of the 8 images were visible in the bottom carousel.. But hopefully this will be of help.

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