スマフォにも対応・ディスプレイサイズに自動で幅調整するレスポンシブなjQueryイメージスライダー・Blueberry

Ads

どのようなディスプレイサイズでも自動で
レイアウトを調整してくれるレスポンシブな
イメージスライダーを実装出来るjQueryプ
ラグイン・Blueberryのご紹介です。イメージ
スライダーを取り入れているサイトは多い
のでこういうのは助かりますね。

iPhone等のスマートフォンにも自動でサイズを調整してくれます。痒いところに手が届く系ですね。地味にありがたい。

Blueberry


見た目はシンプルなイメージギャッラリーです。が、閲覧するディスプレイのサイズに依存する事無く、自動で幅を調整、最適化してくれます。MediaQueryと相性良さそうですね。

表示確認


Media Queries Testerでのキャプチャです。


Mobilizerでのキャプチャです。

コード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.blueberry.js"></script>
<script>
$(window).load(function() {
  $('.blueberry').blueberry();
});
</script>

本体とプラグインを読みこんでセレクタを指定するだけ。フェードする時間の調整等のオプション設定も可能です。

マークアップ

<div class="blueberry">
  <ul class="slides">
    <li><img src="img/slide1.jpg" /></li>
    <li><img src="img/slide2.jpg" /></li>
    <li><img src="img/slide3.jpg" /></li>
    <li><img src="img/slide4.jpg" /></li>
  </ul>
 
  <ul class="pager">
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
  </ul>
</div>

ライセンスはGPLらしいです。少しだけ表示が遅めかな?あと、IE7でページャの表示に不具合あるっぽいのでcssの調整が必要そうです。便利は便利なので上手く使いたいですね。マークアップもシンプルですし、なかなか良いのではないでしょうか。以下でダウンロードとデモの確認が可能です。

Blueberry