スライダーを2つ設置して、それに対してcontrolNavを1つ設置して、
controlNavを操作すると2つのスライダー共に同じ動きをするスライダーを作りたいです。
試しに「flexslider2」を利用して、オプションのcontrolsContainerを同じものにしてみましたが一方のみ反応して正常に動きませんでした。
javascript
1$(window).load(function() { 2 $('.slider1').flexslider({ 3 controlsContainer: '#hoge', 4 }); 5 $('.slider2').flexslider({ 6 controlsContainer: '#hoge', 7 }); 8});
どのようにすれば実現が可能か、お分かりになる方がおられましたらご教授をよろしくお願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
ベストアンサー
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>
投稿2017/09/29 02:15
編集2017/09/29 05:48退会済みユーザー
総合スコア0
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/29 02:27
退会済みユーザー
2017/09/29 02:40
2017/09/29 04:51
退会済みユーザー
2017/09/29 05:49 編集
2017/09/29 06:44