野良メモ -noramemo-noramemo

京都市山科区のフリーランスwebデザイナーのブログです。

軽量スライダー「FlexSlider.js」の実装メモ

この記事は2012年10月11日に書かれたもので、内容が古い可能性がありますのでご注意ください。

軽量のスライダー「FlexSlider.js」の実装メモ

とあるスマートフォンサイトの制作中にメインビジュアル部分に動きをつけようと実装してみました。
軽量なのでスマートフォンサイトと相性のいいjQueryですね!

どうも!仕事関連のメモが全く残せていないことを見て見ぬフリをしていたnoramasaです!
やはり、日付が変わるくらいに退社→帰宅してからでは、なかなかメモを残していく時間がなくて気持ちだけが焦ってしまいます。
もう少し自分の時間が取れればいいんですが…少しずつでも続けれるようにがんばります!
ということで…今回は仕事中にスマートフォンサイト作成業務で実装したjQuery「FlexSlider.js」についてメモっておきます!

  • 軽量のスライダー「FlexSlider.js」の実装メモ

実装・設定方法

Flexsliderの公式サイトからデータをダウンロードします。
HTMLへの記述例はこんな感じ。

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.flexslider.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$('.flexslider').flexslider()
;});
</script>
</link>
<div class="flexslider">
<ul class="slides">
	<li>
	<img src="img01.png" alt="キャプションありの場合" />
	<p class="flex-caption">キャプション</p>
	</li>
	<li>
	<img src="img02.png" alt="キャプションなしも可能" />
	</li>
</ul>
</div>

カスタマイズ・オプションなど

主なカスタマイズとしては下記のとおり…
少しの行を追記するだけである程度カスタマイズができるので、複雑なものでなければずっと使っていけそうですね。

animation: "fade",	 	//切替方法 fade or slide
slideshow: true,		//自動再生 true or false
slideshowSpeed: 7000,		//スライドショーの時間 1000 = 1秒
animationDuration: 500,		//アニメーション時間 1000 = 1秒
directionNav: true,		//ナビボタン true or false
controlNav: true,		//ページングナビボタン true or false
keyboardNav: true,		//キーボードナビ true or false
slideToStart: 0,		//最初のスライド
pauseOnAction: true,		//アクション時にストップ true or false
pauseOnHover: false,		//マウスオーバー時にストップ true or false

まとめ

カルーセルのように数枚並べての利用もできるのでメインビジュアルの切替意外にも、
バナーをまとめたスライドショーなんかも簡単にできそうです。
スマートフォンではスワイプ対応もしてるのでPC・スマホどちらにも使用できるのが有難いです!

>>>デモ版はこちらからご確認ください。