iTunes Store風インターフェイスを実装するJS Coda-Slider

iTunes StoreのNew ReleaseWhat's Hotなどの部分で使われているインターフェイスは省スペースで多くの情報を提供出来るクールで優れたインターフェイスですよね。色々なJavaScriptライブラリが公開されていますが、その中でもjQueryを使ったライブラリであるCoda-Sliderを紹介します。

必要なライブラリは計4つ。Ver1.2以上のjQuery、jQuery easing plugin、jQuery easing compatability plugin、そしてCoda-Sliderです。

まずはデモを作りましたのでご覧ください

ページを切り替える左右の矢印とセンター上部のタブはCoda-Slider.jsで生成されます。JavaScriptが無効になっている場合はslide.cssの.cswで定義されるのでアクセシビリティ的にも問題ないと思います。

ただデザインする時にJSで生成される部分が作りづらいので僕の場合、JSで生成されるHTMLコードも含めたHTMLファイルdammy_slide.htmlなるものを用意してます。

dammy_slide.htmlを含めたデモサイトをZIPに圧縮したものをダウンロード出来るようにしておきますので参考にしてみてください。slide.cssで定義している画像のwidthやheight、background、divのwidthやheightをちょこっと変更するだけで使えると思います。

slider.zipをダウンロード