自動切り替え機能をつけたカルーセルにマウスが乗ったら停止する方法

昨日の続き(自動切り替え機能のないカルーセルライブラリに自動切り替え機能をつける方法 | while(isプログラマ))

jQuery最高の教科書を読んでいたらスライドショーを作るという項目があって、その中にマウスが乗ったら自動切り替えを停止するという項目があり、「なるほど！」と思ったので機能作ったサンプルページを少しだけ拡張してみました。

以下が今回作成したJavaScriptのコード

$(function(){
    var timerID, interval = 7000;
    
    autoFlipster = function(){
        $('.flipto-next').click();
    };
    
    function startTimer(){
        timerID = setInterval(autoFlipster, interval);
    }
    function stopTimer(){
        clearInterval(timerID);
    }
    
    $('#autoCarousel').flipster({
        itemContainer: 			'ul',
        itemSelector: 			'li',
        enableMousewheel: 	true,
        enableNavButtons: 	true
    });
    
    // マウスが乗ったらタイマー停止、はずれたら開始
    $('#autoCarousel').on({
        mouseenter: stopTimer,
        mouseleave: startTimer
    });
    
    startTimer();
});

8～10行目でタイマー処理の関数を作成し、11～13行目でタイマーの停止処理の関数を作成。23～26行目でマウスが乗ったり離れたりした時の処理を書いています。
これで、クリックした途端にタイマーが発動して切り替わるという心配がなくなりそうです(もちろん、マウスを載せていても自動切り替え処理をいれたいという場合には別の処理が必要ですが)。

以下、サンプルページ。
自動カルーセル切り替え