数々のJavaScriptスライドショーを使ったり書いたりしてきましたが、自分なりに機能を盛り込んだものを作りました。実装は2種類あります。1つは、スライドを配置したコンテナごと動かす方法、もう1つは前後のスライドを重ね合わせて前のスライドをトランジションさせる方法です。

最近はrequire.jsを使って書けば書くほどオレオレライブラリが充実して行くのが楽しいです。個人的な書き方になってしまっているのでここでの紹介は省略します。興味ある方は直接ソースを見てください。

スライダーにあったら良さげな機能、オプション

これらの条件を2つの方法で可能な限り実現してみる。

上下/左右方向のスライドイン/アウトのみの単純なスライダー実装

⇒コンテナの位置だけいじればよい
とはいえ、複数表示・リピートなどオプション実現はそれなりに複雑

simpleslider_1

simpleslider_2

simpleslider_3

様々なトランジションをかけられるスライダー実装

⇒フェードイン/アウトやタイリングなどのトランジションエフェクトをかけられる

エフェクトはスライダー本体をいじらずにオブジェクトを取り替えることで変更できるようにしました。

トリガーの即応性は確保できないとしましたが、現在のスライドを無限に(z-indexの許す限り)下に入れて行けば連続トリガーも実現できそうだと書いていて思った。

transitionslider_1

おまけ:トランジション版+フルスクリーン

結構むりやりです。