初心者でも簡単にスライダーが設置できるjQueryプラグイン「FlexSlider」

初心者でも簡単にスライダーが設置できるjQueryプラグイン「FlexSlider」

初心者でも簡単にスライダーが設置できるjQueryプラグイン「FlexSlider」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

FlexSliderを使って、WEBサイトにスライダーを設置する方法を紹介したいと思います。

FlexSliderは、WEBサイトにスライダーを設置するためのjQueryプラグインです。JavaScriptの知識がなくても、簡単にスライダーを設置することができます。

デモは、以下より確認できます。

デモページを見る

スポンサードリンク

ステップ1. FlexSliderのダウンロード

まずは、Flexslider by WooThemesにアクセスして、FlexSliderをダウンロードしましょう。

Flexsliderをダウンロード

[DOWNLOAD FLEXSLIDER]をクリックすると、ZIPファイルがダウンロードされます。

ステップ2. 必要なファイルの設置

ファイルをダウンロードしたら、必要なファイルをサーバー上に設置していきます。

ダウンロードしたZIPファイルを解凍すると、フォルダやファイルがいくつか出てきますが、必要なのは以下のフォルダとファイルだけです。

  • fontsフォルダ
  • imagesフォルダ
  • flexslider.css
  • jquery.flexslider-min.js

これらのファイルをサーバー上の適当な場所に設置してください。

ステップ3. スライド画像の設置

続いて、スライダー用の画像を読み込みます。HTMLファイルに、以下のように記述しましょう。

index.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をロードして、スライダーを動かします。

index.html
<link rel="stylesheet" type="text/css" href="css/flexslider.css">

まずは、flexslider.cssをロードするために、上記を<head>内に記述します。

次に、スクリプトを記述します。これは、<head>内に記述してもいいですし、</body>の直前に書いてもOKです。

index.html
<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の動画を使うといったこともできるみたいです。オプションの詳細については、デモページで確認できます。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。