jQuery スライダープラグイン FlexSlider 2の使い方
スタンダードなものからサムネイルを用いたページ送りを実装できたり、さらにはフリックにも対応した非常に多機能で柔軟なスライドショーが実現できる jQueryプラグイン FlexSlider 2を紹介します。デザインやエフェクトも細かく設定できるスグレモノです。
FlexSlider 2の使い方
FlexSlider 2のサイトからデモファイルをダウンロードして解凍した ZIPファイルの中にある jquery.flexslider-min.jsをサーバーにアップロードします。
HTML head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="js/jquery.flexslider-min.js"></script> <script src="http://web-pixy.com/js/jquery.flexslider-min.js"></script>
jQueryのライブラリと jquery.flexslider-min.jsを HTMLの head要素に指定します。
HTML body
<div class="flexslider"> <ul class="slides cf"> <li><a href="リンクURL"><img alt="画像の説明" src="画像URL" /></a></li> <li><a href="リンクURL"><img alt="画像の説明" src="画像URL" /></a></li> <li><a href="リンクURL"><img alt="画像の説明" src="画像URL" /></a></li> <li><a href="リンクURL"><img alt="画像の説明" src="画像URL" /></a></li> </ul> </div>
画像をリスト要素で囲み、.slidesを指定する。その親要素に .flexsliderを指定します。今回このプラグインを試してみたところ、エフェクトに fadeを指定した際にレイアウトが崩れてしまいました。ダウンロードしたデモを確認したところ、原因は .slidesに clearfixが指定されていない事にありました。
JavaScript
$(function(){
$('.flexslider').flexslider({
animation: "slide",/* エフェクトの種類 スライド */
pauseOnHover: true,/* 画像やボタンにマウスオーバーした時にスライドを停止する */
slideshowSpeed: 5000,/* 次の画像に切り替わるまでの時間 5000ミリ秒 */
animationSpeed: 500,/* エフェクトのスピード 500ミリ秒 */
easing: 'easeInOutQuart'/* イージング easeInOutQuart */
});
});
FlexSlider 2の使い方は下記のリンクから確認できます。
FlexSlider 2のデモ
FlexSlider 2には、エフェクトの種類をスライド、画像やボタンにマウスオーバーした時にスライドを停止する、次の画像に切り替わるまでの時間は5000ミリ秒、エフェクトのスピード 500ミリ秒、イージングの種類は easeInOutQuartを指定しています。
