左から右に動かすスライダー 【flexslider】

2014073100

どうもこんにちは。最近ジョギングを頑張って2kgほど軽くなりました!北見尚之です。今回はありそうでなかなか見つからない左から右に流れるスライダーの備忘録です。

スライダーのjqueryは色んな種類があり、エフェクトもスライドだけでなく、フェードやパラパラかわったり、中には画像が額から落ちて切り替わったりと種類も豊富で見る人を楽しませてくれます。ただとある理由から左から画像が入って右に抜けるスライダーを探していたのですが、なかなか見つからず。。jqueryの中身を見るがチンプンカンプンにて候。。

結論 flexsliderを使いましょう。

これだけです。jqueryのflexsliderを使う。オプションのreverseを使う。これだけで彼がすべてを片付けてくれます。ちなみにnivosliderにも似た効果があります。(slideinLeft,slideinRightというオプションですが、スライドが入ってくるという動作ではなく、左から右に画像が上書きされて見えるような効果でした。)

1. flexsliderをダウンロード

http://flexslider.woothemes.com/にアクセスして左上のDLボタンからflexsliderをダウンロード

2. ダウンロードしたflexslider一式を自分のレンタルサーバーにアップロード

いつもどおりですね。ファイル一式をアップロードしてください。

2014073101

3. タグからflexsliderのスクリプトとスタイルシートを読み込みます。

<head>

<link rel="stylesheet" type="text/css" href="/css/flexslider.css" /> //flexsliderのCSSを読み込み
<script type='text/javascript' src='/js/jquery/jquery.js'></script> //jqueryのスクリプトを読み込み
<script type='text/javascript' src='/js/jquery.flexslider.js'></script> //flexsliderのスクリプトを読み込み

</head>

読み込みができているかの確認はサイトを開いてソースを表示。URLを押した時にソースコードが画面に表示されるか?404とNotfoundと表示された場合は読み込むURLの記述が間違ってます。

3. htmlにスライドショーのマークアップ


<div class="flexslider">

  <ul class="slides">
    <li><img src="image/slideimage01.jpg" /></li>
    <li><img src="image/slideimage02.jpg" /></li>
    <li><img src="image/slideimage03.jpg" /></li>
    <li><img src="image/slideimage04.jpg" /></li>
  </ul>

</div>

div要素に”flexslider”、ul要素に”slider”を記述してスライドさせたい画像をリスト

  • で並べます。

    4. headタグ内にflexsliderの動作用のコードを記述します。

    
    <head>
    <script type="text/javascript">
    $(window).load(function () {
      $(document).ready(function(){ 
        $('.flexslider').flexslider({
        animationSpeed: 1000,
        animation: "slide",
        controlNav: false,
        directionNav: false,
        easing: "easeOutQuint",
        slideshowSpeed: 6000,
        reverse: true
        });
      });
    });
    </script>
    </head>
    
    

    以上で完成です。さて話の最初に戻りますが、スライダーを左から右に流すオプションは上記オプションの”reverse”になります。reverse: true を入れてあげることで簡単に実装可能です。

    >デモサンプル

    以上です。オプションは時間があるときに追記します!