[javascript] flexsliderを複数設置する際の注意

「flexsliderを囲むタグのクラス名は必ず「flexslider」にしないといけない」というルールを知らなかったために数10分時間を無駄に費やしてしまった。

先日、デモサイトのトップページにスライドショーとカルーセルメニューを設置することになったので、両方ともflexsliderを使うことにしたのですよ。
とりあえず設置してみたところ、両方とも動きはするのだけど、カルーセル側のディレクションナビが動作しなかった。原因は、スライドショー側のクラス名を「flexslider」、カルーセルメニュー側のクラス名を「flexslider2」に設定していたから。ここは両方とも「flexslider」にしなければいけない。
それに気付いて以下のように書き換えたらディレクションナビが動いた。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>test</title>
    <link href="js/FlexSlider/flexslider.css" type="text/css" media="all" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/FlexSlider/jquery.flexslider-min.js"></script>
    <script>
$(window).load(function() {
  
  $('.flex0').flexslider({
    controlNav: false,
    directionNav: true,
  });
  
  $('.flex1').flexslider({
    controlNav: true,
    directionNav: true,
    animation: "slide",
    slideshowSpeed: 12000,
    animationSpeed: 1000,
    itemWidth: 280,
    itemMargin: 0
  });
});
    </script>
  </head>
  <body>
    <div class="flexslider flex0">
      <ul class="slides">
        <li data-sid="0"><img src="img/top00.jpg" alt="*"/></li>
        <li data-sid="1"><img src="img/top01.jpg" alt="*"/></li>
        <li data-sid="2"><img src="img/top02.jpg" alt="*"/></li>
        <li data-sid="3"><img src="img/top03.jpg" alt="*"/></li>
      </ul>
    </div>
    
    <div class="flexslider flex1">
      <ul class="slides">
        <li><img src="img/cs00.jpg" alt="*"/></li>
        <li><img src="img/cs01.jpg" alt="*"/></li>
        <li><img src="img/cs02.jpg" alt="*"/></li>
        <li><img src="img/cs03.jpg" alt="*"/></li>
        <li><img src="img/cs04.jpg" alt="*"/></li>
        <li><img src="img/cs05.jpg" alt="*"/></li>
        <li><img src="img/cs06.jpg" alt="*"/></li>
        <li><img src="img/cs07.jpg" alt="*"/></li>
      </ul>
    </div>
  </body>
</html>