• かちびと.net

    スマートフォンにも対応可能・ウィンドウサイズに応じてレイアウトを自動調整する軽量jQueryイメージスライダー・FLEXSLIDERのご紹介。4KBと軽量なレスポンシブWebデザイン対応のシンプルイメージスライダーです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

スマートフォンにも対応可能・ウィンドウサイズに応じてレイアウトを自動調整する軽量jQueryイメージスライダー・FLEXSLIDER

スポンサーリンク

スマートフォンやiPadなどのタブレットはもちろん、
様々なウィンドウサイズにも自動でレイアウトを
調整するレスポンシブなjQueryスライダーのご
紹介。FLEXSLIDERは4KBと軽量で、実装も
手軽なので覚えておくと重宝しそうです。マーク
アップも簡単なのでiPhone向けサイトの構築
時に導入を検討したいですね。

以前もレスポンシブWebデザイン対応のスライダーをご紹介しました(Blueberryというスクリプトです)が、こちらは加えて軽量なスクリプトで表示も速いようです。

FLEXSLIDER


見た目はシンプルなスライダーですが、iPhoneやiPadのようなウィンドウサイズの狭いデバイスにもレイアウトを自動で調整してくれます。スクリプトも4KBと、とても軽量なのでMediaQueriesとうまく併用したいところですね。


iPhoneでの表示。自動で幅を調整しています。


iPadの幅だとこんな感じ。

コード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
	<script type="text/javascript">
		$(window).load(function() {
			$('.flexslider').flexslider({
			 animation: "slide",
			 controlsContainer: ".flexslider-container"
			});
		});
	</script> 

本体とプラグインとセレクタの指定および設定。

マークアップ

<div class="flexslider">
  <ul class="slides">
    <li> <img src="slide1.jpg" /></li>
    <li> <img src="slide2.jpg" /> </li>
    <li> <img src="slide3.jpg" /></li>
  </ul>
</div>

シンプル!既存サイトにも落とし込みやすいのはありがたいですね。

実機でも確認しましたが思ったほど重くありませんでした。ライセンスもMITといろいろ使い勝手が良さそうです。スクリプトは以下よりダウンロードできます。

FLEXSLIDER

URL :
TRB :

Ads

Posts

Contact

Services