短いjQueryコードでレスポンシブWebデザインに対応したシンプルなスライドショーを作ってみる

この手のは沢山出回っているので今更
っていう感じの話題ですけど、個人的
にはどのライブラリも利用しやすい
感じではなかったので簡単なコード
で出来るものを作ってみます。

最近、人気のスライダー系プラグイン、Nivo SliderがレスポンシブWebデザインに対応しました。

The Nivo Slider is Responsive!

これ以外にもググればプラグインは沢山出てきますので、選択肢は沢山ありますが、短いコードで済むに越した事は無いので試しに書いてみます。

Sample

Sample on jsfiddle

jQuery

$('img:gt(0)').hide();
setInterval(function() {
    $('img:first-child').fadeOut(0).next('img').fadeIn().end().appendTo('div');
}, 4000);​

コードは特別な事はしていません。最初の画像以外非表示にしておいて、あとは順番に画像の表示、非表示を繰り返すだけのものです。エフェクト何も考えてないのでちょっとチカチカしますね。ごめんなさい。

CSS

div { 
    position:relative;
    width: 100%; 
    max-width:450px;  
    padding:0; 
    margin:0 auto;
}
div img {
    position: relative;    
    top: 0; 
    left: 0; 
    width: 100%; 
    height: auto;    
}

CSSもMedia Queriesは使用しません。画像を包括するボックスのサイズをFluidレイアウトと同じ要領で%指定。Youtube等をレシポンシブWebデザインに対応させるのと同じ方法ですね。記事タイトルでは、jQueryでレスポンシブWebデザインに対応、みたいに思えてしまいますが、実際はCSSだけで対応します。

ただし、IE6はmax-widthが使えないのでこのままでは全画面表示になってしまいます。IE6でも表示を崩さないようにするにはハックが必要になりそうです。

HTML

<div>
    <img src="foo.jpg">
    <img src="bar.jpg">
    <img src="hoge.jpg">
    <img src="huga.jpg">
</div>​

HTMLもシンプルで済みます。

レスポンシブWebデザインにするという事は、スマートフォン等でも閲覧できる事を視野に入れている事が殆どですが、それならやはり表示スピードが気になります。それに、スマートフォン用のスライドショーにそんなに高機能な物は不要に感じます。Nivo SliderがレシポンシブWebデザインに対応しましたが、やはり重いですね。で、ふとコード量だけでも抑えたいな、と思って簡単なものから書いてみました。あとは必要に応じてコードを足していけば最小限に抑えられるんじゃないでしょうか。配布されているライブラリよりは軽量なコードで済ませられそうです。