読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【25:flexslider】レスポンシブな画像スライダー | JQueryプラグイン

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本体も用意してください。

基本的な使い方

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 · woothemes/FlexSlider Wiki · GitHub

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

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

全ソースはこちら

github.com

関連アプリ・書籍

jQuery入門道場

jQuery入門道場

jQuery レッスンブック jQuery2.X/1.X対応

jQuery レッスンブック jQuery2.X/1.X対応

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)