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

2015/08/19 2015/08/19

便利で有名なjqueryのスライダープラグインflexsliderですが、manualControlsオプションを使ってサムネイルと連動させる方法をメモ。

controlNavオプションやカルーセル（sync、asNavForオプション）を使ったときはレイアウトが自由に簡単にカスタマイズできません。

↑勝手にサムネイル画像の効果がつく。カスタマイズは本体の解析が必要。

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>