ページ内に複数設置されたスライドショーを同時に動かしたい

bxsliderというjqueryのスライドショーなんですが、これをページ内に複数設置しています。

どちらか一方のnextボタン、pervボタンを押すと、
二つのスライドショーを同時にスライドもしくはフェードさせるように動かしたいです。

方法はないでしょうか？

また、「このテキストは固定」と書いてあるものは、動かさず固定表示にしたいと思っていますが、
これはできなさそうでしたら大丈夫です。

サンプルはこちらです。

<!doctype html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></script> <link rel="stylesheet" type="text/css" href="http://bxslider.com/lib/jquery.bxslider.css"> </head> <body> <script> $(document).ready(function(){ $('.bxslider1').bxSlider({ auto: false, minSlides: 1, //最低限表示する数 maxSlides: 1, //マックスで表示する数 moveSlides: 3, //スライドをどのくらいの数を動かすか slideWidth: 200, //ひとつの要素の幅を指定 controls: false }); $('.bxslider2').bxSlider({ auto: false, }); }); </script> <ul class="bxslider1"> <li>サンプルテキスト1<br><span style="color:#ff0000;">このテキストは固定</span></li> <li>サンプルテキスト2<br><span style="color:#ff0000;">このテキストは固定</span></li> <li>サンプルテキスト3<br><span style="color:#ff0000;">このテキストは固定</span></li> </ul> <ul class="bxslider2"> <li><img src="sample1.jpg" /></li> <li><img src="sample2.jpg" /></li> <li><img src="sample3.jpg" /></li> </ul> </body> </html>

行動規範の内容に同意します

回答1件

ベストアンサー

同時スライドは次のコードで出来ると思います。

lang
1    $(function(){ 
2      var firstSlider = $('.bxslider1').bxSlider({ 
3            auto: false, 
4        minSlides: 1, //最低限表示する数 
5        maxSlides: 1, //マックスで表示する数 
6        moveSlides: 3, //スライドをどのくらいの数を動かすか 
7        slideWidth: 200, //ひとつの要素の幅を指定 
8        controls: false     
9        }); 
10      var secondSlider = $('.bxslider2').bxSlider({ 
11            auto: false,
12            onSlideNext: function(element, oldIndex, newIndex){
13                firstSlider.goToNextSlide();
14            },
15        });     
16    }); 
17