bxSliderで　上下同期したスライダーを複数設置する。

bxSliderで　上下同期したスライダーを複数設置しようとしているのですがうまくいかないので、質問させていただきます。

javascript
1jQuery(document).ready(function($) {
2//for (var n = 1; n < 10; n++){
3var n = 1;
4    var sliderclassA = '.sliderA' + n;
5    var sliderclassB = '.sliderB' + n;
6
7  var sliderMain = $(sliderclassA).bxSlider({
8      infiniteLoop: true,
9      touchEnabled:false,
10      pager: false,
11      mode: 'fade',
12      onSlideBefore: function($slideElement, oldIndex, newIndex) {sliderLink.goToSlide(newIndex);}
13  });
14   var sliderLink = $(sliderclassB).bxSlider({
15      infiniteLoop: true,
16      touchEnabled:false,
17      mode: 'fade',
18      pager: false,
19      controls: false,
20  });
21//}
22});

.sliderA1　と　.sliderB1、
.sliderA2　と　.sliderB2、
.sliderAn　と　.sliderBn、、、、
は同期させてスライドさせています。

上記のようにループせずにvar n = 1;の場合は、動きますが、
コメントアウトしている、forやwhileでループさせようとすると記述する箇所がいけないのか、動かなくなります。

htmlはこのようなイメージです。

html
1<ul class="slider sliderA1">
2  <li>（画像1）</li>
3  <li>（画像2）</li>
4  <li>（画像3）</li>
5</ul>
6<ul class="slider2 sliderB1">
7  <li>（画像1に対応）</li>
8  <li>（画像2に対応）</li>
9  <li>（画像3に対応）</li>
10</ul>
11
12<ul class="slider sliderA2">
13  <li>（画像4）</li>
14  <li>（画像5）</li>
15  <li>（画像6）</li>
16</ul>
17<ul class="slider2 sliderB2">
18  <li>（画像4に対応）</li>
19  <li>（画像5に対応）</li>
20  <li>（画像6に対応）</li>
21</ul>
22
23：
24：
25
26<ul class="slider sliderAn">
27  <li>（画像7）</li>
28  <li>（画像8）</li>
29  <li>（画像9）</li>
30</ul>
31<ul class="slider2 sliderBn">
32  <li>（画像7に対応）</li>
33  <li>（画像8に対応）</li>
34  <li>（画像9に対応）</li>
35</ul>

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

回答1件

ベストアンサー

これでどうでしょう。

js
1jQuery(document).ready(function($) {
2for (var n = 1; n < 10; n++){(function(n) {
3    var sliderclassA = '.sliderA' + n;
4    var sliderclassB = '.sliderB' + n;
5
6  var sliderMain = $(sliderclassA).bxSlider({
7      infiniteLoop: true,
8      touchEnabled:false,
9      pager: false,
10      mode: 'fade',
11      onSlideBefore: function($slideElement, oldIndex, newIndex) {sliderLink.goToSlide(newIndex);}
12  });
13   var sliderLink = $(sliderclassB).bxSlider({
14      infiniteLoop: true,
15      touchEnabled:false,
16      mode: 'fade',
17      pager: false,
18      controls: false,
19  });
20})(n); } // for
21});

また、slider slider2 を囲うdivを作るなどするほうが直感的な書き方が出来ると思います。

HTML
1<div class="slider-wrap">
2	<ul class="slider sliderA">
3		<li>（画像1）</li>
4		<li>（画像2）</li>
5		<li>（画像3）</li>
6	</ul>
7	<ul class="slider2 sliderB">
8		<li>（画像1に対応）</li>
9		<li>（画像2に対応）</li>
10		<li>（画像3に対応）</li>
11	</ul>
12</div>
13<div class="slider-wrap">
14	<ul class="slider sliderA">
15		<li>（画像1）</li>
16		<li>（画像2）</li>
17		<li>（画像3）</li>
18	</ul>
19	<ul class="slider2 sliderB">
20		<li>（画像1に対応）</li>
21		<li>（画像2に対応）</li>
22		<li>（画像3に対応）</li>
23	</ul>
24</div>

js
1jQuery( function( $ ) {
2	$( '.slider-wrap' ).each( function() {
3		var sliderMain = $( '.sliderA', this ).bxSlider( {
4			infiniteLoop: true,
5			touchEnabled: false,
6			pager: false,
7			mode: 'fade',
8			onSlideBefore: function( $slideElement, oldIndex, newIndex ) { sliderLink.goToSlide( newIndex ); }
9		});
10		var sliderLink = $( '.sliderB', this ).bxSlider( {
11			infiniteLoop: true,
12			touchEnabled: false,
13			mode: 'fade',
14			pager: false,
15			controls: false,
16		} );
17	} );
18} ); // 未テスト