jQueryを利用したスライダーを3分で設置する

このブログでも利用させてもらっている、「Flexslider」が簡単に設置出来すぎる・・・と言う事で記事にします。
ほんとにあっけないほど簡単に出来すぎて、楽させてもらっちゃいました。

 

作業開始!

まずは、下記のURLから必要なファイルをダウンロードしてきましょう。

 

Flexslider by WooThemes (デモページ
http://www.woothemes.com/flexslider/

 

ページ内の「Download Flexslider」からファイルをダウンロードする事ができます。

 

開始から1分経過

ダウンロードが完了したら、とりあえず使ってみましょう。
解凍の仕方がわからない場合には、Google先生に聞いてみてください。

 

ダウンロードすると、こんな感じにディレクトリが展開されると思います。

 - demo
   - ...(略)
 - images
   - bg_direction_nav.png
 - flexslider.css
 - jquery.flexslider.js
 - jquery.flexslider-min.js
 - README.mdown

 

必要になるファイルは、下記の3つだけです。

 - images
   - bg_direction_nav.png
 - flexslider.css
 - jquery.flexslider-min.js

 

開始から2分経過

この3つを自分のサイトの構成にあった場所にファイルを配置して下さい。
配置したら、あとは利用したいページに下記の内容を記述するだけです。

 

<head>
  <link rel="stylesheet" href="flexslider.css" type="text/css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="jquery.flexslider.js"></script>
</head>  
<body>
  <script type="text/javascript">
    $(document).ready(function(){
      $('.flexslider').flexslider();
    });
  </script>
  <div class="flexslider">
    <ul class="slides">
      <li><img src="image01.jpg" /></li>
      <li><img src="image02.jpg" /></li>
      <li><img src="image03.jpg" /></li>
    </ul>
  </div>
</body>

 

これだけで、スライダーが実装出来てしまいます。
このままだと、イメージの切り替わりがスライドではなくフェードアウトになるため、少し設定を変えてみましょう。

 

開始から3分経過?

変更する場所は、scriptタグ(9行目)のあたりをチョコっといじるくらいです。

  <script type="text/javascript">
    $(document).ready(function(){
      $('.flexslider').flexslider({
        animation: 'slide'
      });
    });
  </script>

 

オプションとして、animation:’slide’を設定するだけで画像の切換えがフェードアウトからスライドに切り替わります。

 

その他にもいろいろなオプションを設定できるようですので、公式サイトで確認しながら利用してみてはいかがでしょうか?
きっと設置したサイトの見た目が20%くらいアップしますよ!!

関連する記事

コメントを残しませんか?