jQueryで独自スライドショー作成チュートリアル(1)(スライドショーの基本動作)
車輪の再発明ですか。そうです。
いまさらすぎやしませんか。今でしょ！（強がり）
いや、たしかに、世の中にはスライドショーを実現するのに、便利なjQueryプラグインはすでにゴマンと存在します。
僕のオススメは、<div>単位で扱え、ライセンスも緩やかな、bxSlider や、jQuery Slider2でしょうか。
とはいえ、いろいろいじくっていると、「この機能が無い・・・」とか、この演出を実現するには、「無理くりプラグインの仕様に合わせる必要がある・・・」など出てきます。
ああ、やっぱり、仕組みを押さえながら、自分で一から、シンプルに実装してみたいなあ、といつしか思うように。
今回の連載記事では、僕がどうやってスライドショーを実現するところまで至ったか、その過程を順番に辿っていきます。最終的には、軽量でシンプルなjQueryスライドショー・プラグインをつくってみようと思っています。
また、段階的に、その時点でまとめたサンプルソースも公開していきますので、それを元に、いろいろ参照してくださるなり、勝手に改良してくださってかまいません。
ここで配布されるサンプルデータすべてのライセンスは、前述のbxSliderプラグインに敬意を表し、WTFPL licenseとします(笑)。
まずはスライドショーの仕組みを考え直してみる
スライドショーを実現するとするというのは、つまり、各スライドを横につなげた「全体」が、横へスライドするアニメーションをしているいうことです。
アニメーションは、jQueryを使って表現します。
さいしょのスライド
まんなかのスライド
さいごのスライド
このサンプルソースはコチラ↓
スライドショーの見える部分と見えない部分
このままの状態では、全体としてアニメーションし、横ズレしているだけですが、けっきょくは見える範囲を指定し、不必要な部分を隠せば、スライドが入ってくるように見えます。
前のサンプルとはまったく同じです。異なるのはたった一箇所。
ポイントは、CSSです。
[css]
#slides {
overflow: hidden;
[/css]
を指定している部分です。
これで、赤枠以外を表示しないようにします。
つまり、裏ではつながったスライドが「全体」として移動しているのですが、見えている部分は赤枠だけですので、見えていないところから、別のスライドが入ってくるように見えるという仕掛けです。
さいしょのスライド
まんなかのスライド
さいごのスライド
このサンプルソースはコチラ↓
次回は、スライドショーの操作をユーザーの手で行えるようにします。
つづきます。