【25：flexslider】レスポンシブな画像スライダー

f:id:seintoseiya:20150728215126p:plain
プロジェクトNo.25：flexslider

そろそろ実際に仕事で役立つ（だろう）技術を使えるようにと、様々なプラグインを活用していこうかと思います。
手始めにここで紹介されているプラグインを片っぱしから触っていきます。
【新人向け】簡単にできた！Webサイトでよくみる技術のまとめ – FEVDES BLOG

まずはレスポンシブ対応で、スマホでのフリック操作可能、かつ設置も簡単なflexslider。

ライブラリのダウンロード

以下の公式サイトからライブラリファイルをダウンロードします。
FlexSlider 2
（こちらからもダウンロードできます。）

今回ダウンロードしたバージョンはFlexSlider 2.5.0です。
この中から使うのは以下のファイル。

jquery.flexslider-min.js
flexslider.css
fontsフォルダ（一式）

後、当然ですが別でjquery本体も用意してください。

jquery-2.1.4.min.js

基本的な使い方

HTML

CSSとJSを呼び出し。

<link rel="stylesheet" href="flexslider.css" type="text/css" />

<script src="./js/jquery-2.1.4.min.js"></script>
<script src="./js/jquery.flexslider-min.js"></script>

適宜、liの行を変更する。

<div class="flexslider">
	<ul class="slides">
		<li><img src="img/c1.jpg" /></li>
		<li><img src="img/c2.jpg" /></li>
		<li><img src="img/c3.jpg" /></li>
	</ul>
</div>

JavaScript

たった3行追加するだけ。

$(window).load(function() {
	$('.flexslider').flexslider();
});

たったこれだけで動いてしまいます。
しかもレスポンシブ対応。

オプション

また以下で紹介されている様に豊富なオプションも用意されています。
【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 | 株式会社オンズ
 FlexSlider Properties · woocommerce/FlexSlider Wiki · GitHub

使い方は先ほどのJSの中のflexslider()関数の中に書いていけばOKです。

$('.flexslider').flexslider({
    animation: "slide",
    slideshowSpeed: 2000,
    start: function(){
       $('#caption').html('Start'); 
    },
    end: function(){
       $('#caption').html('End');
    }
});