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
Update
$('.cycle-slide-active').removeClass('cycle-slide-active');
$('#cycle-2').on('cycle-update-view', function(e, opts) {
$('.cycle-slide-active').removeClass('cycle-slide-active');
});
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');
});