FlexSlider2
今回紹介するjQueryプラグインもまた、有名どころですが「FlexSlider2」です。
豊富なオプションとIE7まで対応しているので重宝します。ほんとはIE7なんざ絶対にもう対応したくないけど！
用意するものは３つ
まずは公式ページからファイル一式をダウンロードします。いろいろと入っていますが最低限必要なファイルは下記になります。
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" /> <script defer src="jquery.js"></script> <script defer src="jquery.flexslider.js"></script>
基本的な書き方
htmlのマークアップはこんな感じになります。普通にリストを作れば良いので簡単ですねー。
※cssも使っているため、class名は変えない方が良いかもです。
<div class="flexslider"> <ul class="slides"> <li><img src="image1.jpg" /></li> <li><img src="image2.jpg" /></li> <li><img src="image3.jpg" /></li> <li><img src="image4.jpg" /></li> </ul> </div>
こちらはJSで最低限必要な記述になります（オプションを加えない書き方）。
プラグインの記述自体は１行で済むのでJSが苦手な人も安心です。
$(function(){
//class="flexslider"をスライダーにするよ！って記述。
$('.flexslider').flexslider();
});
ちなみにli要素をスライドするので中身にテキスト・画像など何を入れても大丈夫。情報を入れ込んだボックスをスライドさせることができます。
たくさんのオプション
オプションの書き方はこんな感じです。それぞれのオプションは「,」で繋いでいきます。最後のオプションに「,」はいらないので気をつけましょう。うまくいかないときはそういった記述ミスが多いので…
$('.flexslider').flexslider({
animation: "slide",
animationLoop:false,
slideshow:false,
end: function(){
//end:オプションでは最後までスライドしたときに発生する処理を追加できる。
$('.flexslider').animate({"opacity": 0},2000);
}
});
よく使いそうなオプションをいくつか書いておきます。
animation: ・・・“fade”か”slide”を選択できる。
slideshow: ・・・”true”/”false” スライドショーの自動再生の有無
slideshowSpeed: ・・・スライドする感覚の設定。デフォルトは70000
controlNav: ・・・”true”/”false” ナビゲーションを表示非表示
もっと詳しく知りたい方は、公式もしくは、この記事を書くときにも参考にさせていただいたオンズさんのブログもおすすめです。
CSSをいじればいろいろ調整できる
実際に制作していると、デフォルトのままのデザインで使うことってあまりない気がします。
そこでflexslider.cssの中身を見てみると、「.flex-next」への指定で次へボタンの装飾を行っているのが割と簡単にわかります。このプラグインはボタンの表示非表示、ちょっとしたアニメーションなんかもclassの付け替えで行っているようなので、こちらでそうした調整も出来ます。
そんなに長いファイルでもないので、CSSの出来る方ならそんなに苦労はしないでしょう。
これらの設定をいじることで、スライダーの見た目も自分好みのものにカスタマイズして使うとさらに便利に使えるはずです！
