この手のは沢山出回っているので今更
っていう感じの話題ですけど、個人的
にはどのライブラリも利用しやすい
感じではなかったので簡単なコード
で出来るものを作ってみます。
最近、人気のスライダー系プラグイン、Nivo SliderがレスポンシブWebデザインに対応しました。
これ以外にもググればプラグインは沢山出てきますので、選択肢は沢山ありますが、短いコードで済むに越した事は無いので試しに書いてみます。
Sample
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デザインに対応しましたが、やはり重いですね。で、ふとコード量だけでも抑えたいな、と思って簡単なものから書いてみました。あとは必要に応じてコードを足していけば最小限に抑えられるんじゃないでしょうか。配布されているライブラリよりは軽量なコードで済ませられそうです。
