2つのスライダーを1つのコントロールナビで操作できるようにしたい

Question

スライダーを2つ設置して、それに対してcontrolNavを1つ設置して、
controlNavを操作すると2つのスライダー共に同じ動きをするスライダーを作りたいです。
試しに「flexslider2」を利用して、オプションのcontrolsContainerを同じものにしてみましたが一方のみ反応して正常に動きませんでした。

$(window).load(function() {
  $('.slider1').flexslider({
	controlsContainer: '#hoge',
  });
  $('.slider2').flexslider({
	controlsContainer: '#hoge',
  });
});

どのようにすれば実現が可能か、お分かりになる方がおられましたらご教授をよろしくお願いいたします。

Answer 1

manualControls を使えばオリジナルのコントロールが作れるようです。
http://demo.html-coding.co.jp/sbc/2012/C04-08/flexslider/

追記しました。

<div id="main" role="main">
      <section class="slider">
        <div id="f1" class="flexslider carousel">
          <ul class="slides">
            <li>
                  <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_lemon.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_donut.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_caramel.jpg" />
                  </li>
            <li>
                  <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_lemon.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_donut.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_caramel.jpg" />
                  </li>
            <li>
                  <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_lemon.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_donut.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_caramel.jpg" />
                  </li>
          </ul>
        </div>

        <div id="f2" class="flexslider carousel">
          <ul class="slides">
            <li>
                  <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_lemon.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_donut.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_caramel.jpg" />
                  </li>
            <li>
                  <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_lemon.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_donut.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_caramel.jpg" />
                  </li>
            <li>
                  <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_lemon.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_donut.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_caramel.jpg" />
                  </li>
          </ul>
        </div>
      </section>
    </div>
<button onclick="javascript:hoge();">ここ</button>


<script type="text/javascript">
    $(function(){
      SyntaxHighlighter.all();
    });
    $(window).load(function(){

      $('#f1').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 210,
        itemMargin: 5,
        pausePlay: true,
        mousewheel: true,
        start: function(slider){
          $('body').removeClass('loading');
        }
      });

       $('#f2').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 210,
        itemMargin: 5,
        pausePlay: true,
        mousewheel: true,
        start: function(slider){
          $('body').removeClass('loading');
        }
      });


    });

    function hoge()
    {
        $('#f1').flexslider("next");
        $('#f2').flexslider("next");
    }

  </script>

Comments

[gieumm]

早速のご回答ありがとうございます！
manualControlsを使用し、両方のオプションに
manualControls: '#hoge a'を追加してテストしてみましたが、やはり片方のスライダーのみ動作する結果となりました。

[退会済みユーザー]

「sync」というプロパティがあります。これはメインのスライダーをもうひとつのスライダーと動きを同期させる機能のようです。これを使えばひとつのナビでふたつのスライダーを動かすことができそうです。
http://demo.html-coding.co.jp/sbc/2012/C04-08/flexslider/

[gieumm]

syncプロパティは、一方のスライダーをもう一方のスライダーのナビのようにするっぽくて、コントロールナビが効かなくなるようで、想定しているものにはそぐわないと感じました。

[退会済みユーザー]

ソースを追記しました。
ナビのデザインは独自でする必要がありますが、
flexslider("next"); を使うと両方のスライダーを操作することができました。

[gieumm]

ご丁寧にありがとうございます！
このソースを基に作りこんでみようと思います。
貴重なお時間をありがとうございました！