jCarousel External Event Control

Question

I have been trying to work with a jCarousel external control, but in a way I am finding no examples for.

I have 2 objects on my page, a Cycle control called BackgroundContainer and a jCarousel control called mycarousel.

What I would like is when the Cycle control fires a change then to have the AFTER event of the Cycle control change the carousel to the next slide.

In the below code the AFTER event does fire, I just don't know the right script to have the carousel move to the next item.

Both the Cycle control and carousel current work fine when used manually and clicking, I just can't get this timed thing to work.

Code:

$(window).load(function() { $('#BackgroundContainer').show();

$('#BackgroundContainer').cycle({ 
     startingSlide: 0,
     fx:    'fade', 
     timeout:  5000,
     after: onAfterUpdate
      });

});

$(document).ready(function() { $('#BackgroundContainer').hide(); });

function onAfterUpdate(curr,next,opts) { // need code here }

function mycarousel_initCallback(carousel) { // Disable autoscrolling if the user clicks the prev or next button. carousel.buttonNext.bind('click', function() { carousel.startAuto(0); return false; });

carousel.buttonPrev.bind('click', function() {
    carousel.startAuto(0);
    return false;
});


// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
    carousel.stopAuto();
}, function() {
    carousel.startAuto();
});

};

jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ scroll: 1, animation: 'slow', wrap: 'both', visible: 3, initCallback: mycarousel_initCallback }); });

Answer 1

Did you ever find the solution to this?