紙芝居のようなスライド処理用JavaScript (Slider.js)

2007年5月15日(火) 08:00

Slider.js
写真などスライド表示するJavaScriptライブラリはいろいろとあるが、今までありそうで無かったスライドエフェクトを実装できるライブラリ。Slider.jsを導入することで、写真やFlashコンテンツなどを組み合わせて、紙芝居のようなスライド表示することができる。

動作にはprototype.jsおよびScriptaculousが必要になる。すでにこれらのフレームワークを導入している場合も、新規に導入する場合も簡単に利用できるよう、ダウンロードファイルには、これらのライブラリを含む必要なファイルがすべて含まれている。

設置に関するドキュメントは特に無いので、ダウンロードファイルに含まれるサンプルを参考に導入を進めれば良い。Slider.jsで実装できるスライド処理は非常にシンプルなもので、インターバルを利用して自動でスライドを切り替えたい場合は、別途処理を追加する必要がある。

インターバル処理で自動的に変更するには、以下のように記述する

<script type="text/javascript">
   //スライダーオブジェクトの作成
   var my_slider = new Slider('my-slider', {duration:0.5});
   //自動でスライドを切り替える
   var auto =function(){ my_slider.next(); }
   setInterval(auto,2000);
</script>

Slider.jsに用意されている処理を利用して、インターバルで呼び出すだけで良い。これだけの記述でスライド処理の実装が完了してしまう。上記で紹介した方法ではナビゲーションと組み合わせた場合に難がある。興味のある方は、実装にチャレンジしていただきたい。

関連する記事