jQueryで独自スライドショー作成チュートリアル(1)(スライドショーの基本動作)


車輪の再発明ですか。そうです。

いまさらすぎやしませんか。今でしょ!(強がり)

いや、たしかに、世の中にはスライドショーを実現するのに、便利なjQueryプラグインはすでにゴマンと存在します。

僕のオススメは、<div>単位で扱え、ライセンスも緩やかな、bxSlider や、jQuery Slider2でしょうか。

とはいえ、いろいろいじくっていると、「この機能が無い・・・」とか、この演出を実現するには、「無理くりプラグインの仕様に合わせる必要がある・・・」など出てきます。

ああ、やっぱり、仕組みを押さえながら、自分で一から、シンプルに実装してみたいなあ、といつしか思うように。

今回の連載記事では、僕がどうやってスライドショーを実現するところまで至ったか、その過程を順番に辿っていきます。最終的には、軽量でシンプルなjQueryスライドショー・プラグインをつくってみようと思っています。

また、段階的に、その時点でまとめたサンプルソースも公開していきますので、それを元に、いろいろ参照してくださるなり、勝手に改良してくださってかまいません。

ここで配布されるサンプルデータすべてのライセンスは、前述のbxSliderプラグインに敬意を表し、WTFPL licenseとします(笑)。


まずはスライドショーの仕組みを考え直してみる

スライドショーを実現するとするというのは、つまり、各スライドを横につなげた「全体」が、横へスライドするアニメーションをしているいうことです。

アニメーションは、jQueryを使って表現します。


Slide 1
さいしょのスライド
Slide 2
まんなかのスライド
Slide 3
さいごのスライド

このサンプルソースはコチラ↓

slide01.zip

スライドショーの見える部分と見えない部分

このままの状態では、全体としてアニメーションし、横ズレしているだけですが、けっきょくは見える範囲を指定し、不必要な部分を隠せば、スライドが入ってくるように見えます。

前のサンプルとはまったく同じです。異なるのはたった一箇所。

ポイントは、CSSです。

#slides {
	overflow: hidden;

を指定している部分です。

これで、赤枠以外を表示しないようにします。

つまり、裏ではつながったスライドが「全体」として移動しているのですが、見えている部分は赤枠だけですので、見えていないところから、別のスライドが入ってくるように見えるという仕掛けです。

Slide 1
さいしょのスライド
Slide 2
まんなかのスライド
Slide 3
さいごのスライド

このサンプルソースはコチラ↓

slide02.zip

次回は、スライドショーの操作をユーザーの手で行えるようにします。

つづきます。

コメントフィード

s