一定時間経過すると自動的に右側の画像に切り替えるカルーセルライブラリを探してみたものの、レイアウトがよさそうなライブラリには自動切り替え機能がなかったので仕方なく自分でつけることにしました。
というわけで今回はその方法を紹介。
今回のサンプルは『Flipster』というカルーセルライブラリを利用(参考：レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイン「Flipster」 | bl6.jp)。ただ、今回やろうとしている方法はたいていのカルーセルライブラリで利用できると思います。
まずは、上記のライブラリを使ったHTMLを作成。例えば下記のようなコードになると思います。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自動カルーセル切り替え</title>
<link rel="stylesheet" href="jquery.flipster.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.flipster.min.js"></script>
<script>
$(function(){
$('#autoCarousel').flipster({
itemContainer: 'ul',
itemSelector: 'li',
enableMousewheel: true,
enableNavButtons: true
});
});
</script>
</head>
<body>
<div id="autoCarousel">
<ul>
<li><img src="a1180_011278.jpg"></li>
<li><img src="a1180_011278.jpg"></li>
<li><img src="a1180_011278.jpg"></li>
<li><img src="a1180_011278.jpg"></li>
<li><img src="a1180_011278.jpg"></li>
</ul>
</div>
</body>
</html>
ただ、このままでは画像をクリックするか、Nextボタンをクリックしないかぎり先にすすみません。これに一定時間経過すると自動で切り替える機能をつけるため、下記のようなコードを16行目と17行目の間に追加します。
autoFlipster = function(){
$('.flipto-next').click();
};
var timerID = setInterval(autoFlipster, 7000);
以下、サンプルページ。
自動カルーセル切り替え
やっていることは単純です。4行目のsetIntervalで7秒ごとにautoFlipsterという関数を実行するようにし、autoFlipster関数の中ではネクストボタンをクリックする(2行目)という処理を行っています。自動切り替え機能のついていないカルーセルライブラリには大抵、次へ進むボタンを生成する機能があると思うので、このライブラリじゃなくても同じようにできるはずです。
ただし上記の問題は、自分でNextボタンなどをクリックしたすぐ後に発動する可能性があるということ。Fripsterには切り替えが発生した時に実行する関数を記述するプロパティとして『onItemSwitch』があるのでなんとかなりそうですが、ない場合その対処はちょっと難しいかも。
2013/01/26追記：
と思ったけど、マウスを乗せた時のみ停止させるという方法でなんとかできそうです。
自動切り替え機能をつけたカルーセルにマウスが乗ったら停止する方法 | while(isプログラマ)
コメント
とても参考になりました。素晴らしい記事をありがとうございます。