Search code examples
javascriptjqueryjcarouselcluetip

How to Start/Stop jCarousel by external controls/events


For a current project i need to trigger the Start/Stop Event of the jCarousel Plugin.

carousel.stopAuto();
carousel.startAuto();

I'm not that JavaScript addicted to solve the problem myself. A short explaination what i'm trying to do:

The carousel is a fancy product slider and works already as i expected. But the point is the product-description should be available as a tooltip. So i have to stop the carousel if an tooltip is shown and to restart it after the tooltip is closed. FYI: The tooltip Plugin is Cluetip. Does anyone have any suggestions for me?


Solution

  • Found a solution. Use the following function as init callback for your carousel setup.

    function initCarousel (carousel) {
    
        jQuery('#cluetip').live('mouseover mouseout', function(event) {       
    
            // Disable default action
            event.preventDefault();
    
            // Stop carousel at mouseover
            if (event.type == 'mouseover') {
                carousel.stopAuto();
            };
    
            // Restart carousel at mouseout
            if (event.type == 'mouseout') {
                carousel.startAuto()
            }; 
        });
    
    };