Q:

auto-rotating a jq.carousel using setInterval, and pausing on hover

I'm using jq.carousel and as it doesn't have an auto-rotate function built in I'm using setInterval to advance it every second by calling $carouselHome.carousel('next').
This works, but I need to add 'pause on hover'. Here's what I have so far which works as required only after the mouse has entered and left the element once. How would I 'kick off' the interval on first page load? (example: http://jsfiddle.net/meredevelopment/hmUbd/)
var $carouselHome = $('#carousel-home').carousel();

$('#carousel-home_prev').on('click', function(ev) {
    $carouselHome.carousel('prev');
});

$('#carousel-home_next').on('click', function(ev) {
    $carouselHome.carousel('next');
});

/*setInterval(function() {
    $carouselHome.carousel('next');
}, 1000);*/

$("#carousel-home").mouseenter(function(){
    clearInterval($(this).data('timeoutId'));
}).mouseleave(function(){
    var someElement = $(this);
    var timeoutId = setInterval(function() {
        $carouselHome.carousel('next');
    }, 1000);
    console.log(timeoutId);
    someElement.data('timeoutId', timeoutId); 
});

Thanks!
Ben

A:

Something like this should work:
if ($("#carousel-home").length > 0) {
    var $carouselHome = $('#carousel-home').carousel();

    var timeoutId = setInterval(function() {
       $carouselHome.carousel('next');
    }, 1000);

    $('#carousel-home_prev').on('click', function(ev) {
        $carouselHome.carousel('prev');
    });
    $('#carousel-home_next').on('click', function(ev) {
        $carouselHome.carousel('next');
    });

    $("#carousel-home").mouseenter(function() {
        clearInterval(timeoutId);
    }).mouseleave(function() {
        var someElement = $(this);
        timeoutId = setInterval(function() {
            $carouselHome.carousel('next');
        }, 1000);
    });
}

