flexsliderのmanualControlsを使ってサムネイルと連動させる

 

manualControlsオプションで簡単に連動できる

サンプルコードです。

javascript

<link rel="stylesheet" href="flexslider.css" />
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery.flexslider-min.js"></script>

<script type="text/javascript" >
    $(function() {
        $('#slider').flexslider({
            controlsConatiner: '.flexslider-controls',
            manualControls: ".thumb li",
        });
    });
</script>

controlsConatiner：連動させるクラスを指定
manualControls：サムネイルを追加する要素を指定。スライダーの切り替えに連動して子の要素に「.flex-active」クラスが動的に追加される。

 

html

<--スライダー-->
<div id="slider" class="flexslider">
     <ul class="slides">
         <li><img src="slider01.png"></li>
         <li><img src="slider02.png"></li>
         <li><img src="slider03.png"></li>
     </ul>
</div>
<--サムネイル-->
<div class="flexslider-controls">
     <ul class="thumb">
         <li><img src="thumb01.png"></li>
         <li><img src="thumb02.png"></li>
         <li><img src="thumb03.png"></li>
     </ul>
</div>

スライダーとサムネイルの要素の数を合わせれば連動完了です。

サムネイルのリストは動的にアクティブになった要素に「flex-active」クラスが追加されて下記のようになります。
<li class=”flex-active”><img src=”thumb01.png”></li>

ということで.flex-activeクラスを使えば、アクティブになった時のサムネイルのスタイルを作ることができます。こんな感じでオリジナルスタイルのカルーセルを作成することができます。

 

 - jQuery

  関連記事