FlexSliderを使って、WEBサイトにスライダーを設置する方法を紹介したいと思います。
FlexSliderは、WEBサイトにスライダーを設置するためのjQueryプラグインです。JavaScriptの知識がなくても、簡単にスライダーを設置することができます。
デモは、以下より確認できます。
ステップ1. FlexSliderのダウンロード
まずは、Flexslider by WooThemesにアクセスして、FlexSliderをダウンロードしましょう。
[DOWNLOAD FLEXSLIDER]をクリックすると、ZIPファイルがダウンロードされます。
ステップ2. 必要なファイルの設置
ファイルをダウンロードしたら、必要なファイルをサーバー上に設置していきます。
ダウンロードしたZIPファイルを解凍すると、フォルダやファイルがいくつか出てきますが、必要なのは以下のフォルダとファイルだけです。
- fontsフォルダ
- imagesフォルダ
- flexslider.css
- jquery.flexslider-min.js
これらのファイルをサーバー上の適当な場所に設置してください。
ステップ3. スライド画像の設置
続いて、スライダー用の画像を読み込みます。HTMLファイルに、以下のように記述しましょう。
<div class="flexslider"> <ul class="slides"> <li><img src="images/slide1.png"></li> <li><img src="images/slide2.png"></li> <li><img src="images/slide3.png"></li> <li><img src="images/slide4.png"></li> <li><img src="images/slide5.png"></li> </ul> </div>
flexsliderというクラスで囲み、各スライド画像をリストで記述します。ul要素には、slidesというクラスを付与します。
ステップ4. FlexSliderのロード
スライド画像を設置したら、いよいよFlexSliderをロードして、スライダーを動かします。
<link rel="stylesheet" type="text/css" href="css/flexslider.css">
まずは、flexslider.cssをロードするために、上記を<head>内に記述します。
次に、スクリプトを記述します。これは、<head>内に記述してもいいですし、</body>の直前に書いてもOKです。
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.flexslider').flexslider();
});
</script>
1行目でjQueryをロードして、2行目でFlexSliderをロードしています。
3行目以降は、スライド画像に対してFlexSliderを適用するための記述です。
ここまでできたら、設置したスライド画像がスライダーとして動くようになります。
あとがき
jQueryに関しては、実際に私も初心者ですが、問題なく動作させることができました。コードもシンプルで、初心者にとっても優しいプラグインだと思います。
また、オプションを追加すれば、スライドの切り替え効果を変えたり画像ではなくVimeoの動画を使うといったこともできるみたいです。オプションの詳細については、デモページで確認できます。