noramemo

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

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