Flex Sliderは万能スライダー?
スライドショー用のjQueryプラグインってたくさんある〜。
Skipperなども検討したのですが、どうやらFlex Slider はカスタマイズ性に非常に優れている様??なので使ってみた
・ レスポンシブ対応。
・ タッチコントロールのフリックスライドにも反応。
・ 画像にリンクを貼ることもオッケー。
・ キャプションも表示可能。
・ 動画もスライドできる。
・ コントロールボタンやナヴィゲーションも細かく設定できる
など非常に使い勝手がよいプラグインの様です。
スライダープラグインをまとめている記事
高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた
導入手順
1. FlexSlider
のプラグイン本体をダウンロード
2. <head>〜</head>
内にダウンロードしたスクリプトとスタイルシートを読み込む。
ダウンロードした jquery.flexslider.js、flexslider.css のファイルを、jquery ファイルと一緒に設置。
index.html
<link rel="stylesheet" href="flexslider.css" type="text/css" />
<script src="jquery.js"></script>
<script src="jquery.flexslider.js"></script>
3. htmlファイルのマークアップはこれだけ
index.html
<div class="flexslider">
<ul class="slides">
<li><img src="slider1.jpg" /></li>
<li><img src="slider2.jpg" /></li>
<li><img src="slider3.jpg" /></li>
<li><img src="slider4.jpg" /></li>
</ul>
</div>
とてもシンプル。
次に最低限のjsの記述をしてこれで動く様になります。
index.html
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>