Q&A
前提・実現したいこと
bxsliderを使用して、サムネイル連動のスライドを作成しております。
1ページに複数別々のスライドを設置予定です。
また、<section id="SlideBox01">～</section>を1つのグループとして、
id名が連番で「SlideBox01」～「SlideBox06」までのグループがあります。
グループ内の設置スライド数（スライド画像枚数ではありません）は1つ～6つまでとばらつきがあります。
発生している問題・エラーメッセージ
サムネイル連動は実装出来ました。 しかし、グループ内1つのスライドのサムネイルをクリックしますとグループ内の別スライドも一緒に動いてしまいます。 別のグループのスライドには影響ありません。 グループ内だけでスライド同士が連動してしまっている状況です。
該当のソースコード
HTML
1【id="SlideBox01】だけグループでid名末尾の数字が変わりますが、その他のクラス名は全グループ同じです。 2 3<section id="SlideBox01" class="RoomDeital_Inline"> 4 5 <div class="Slide"> 6 <ul class="bxslider clearfix"> 7 <li><img src="/images/detail/01.jpg" alt="" /></li> 8 <li><img src="/images/detail/02.jpg" alt="" /></li> 9 <li><img src="/images/detail/03.jpg" alt="" /></li> 10 <li><img src="/images/detail/04.jpg" alt="" /></li> 11 </ul> 12 </div> 13 <div class="bx-pager"> 14 <ul class="clearfix"> 15 <li><a data-slide-index="0" href="" class="thumb-edge"><img src="/images/detail/01.jpg" /></a> </li> 16 <li><a data-slide-index="1" href=""><img src="/images/detail/02.jpg" /></a> </li> 17 <li><a data-slide-index="2" href=""><img src="/images/detail/03.jpg" /></a> </li> 18 <li><a data-slide-index="3" href=""><img src="/images/detail/04.jpg" /></a> </li> 19 </ul> 20 </div> 21 22 23 24 <div class="Slide"> 25 <ul class="bxslider clearfix"> 26 <li><img src="/images/detail/05.jpg" alt="" /></li> 27 <li><img src="/images/detail/06.jpg" alt="" /></li> 28 <li><img src="/images/detail/07.jpg" alt="" /></li> 29 </ul> 30 </div> 31 <div class="bx-pager"> 32 <ul class="clearfix"> 33 <li><a data-slide-index="4" href="" class="thumb-edge"><img src="/images/detail/05.jpg" /></a> </li> 34 <li><a data-slide-index="5" href=""><img src="/images/detail/06.jpg" /></a> </li> 35 <li><a data-slide-index="6" href=""><img src="/images/detail/07.jpg" /></a> </li> 36 </ul> 37 </div> 38 39</section>
javascript
1$(window).load(function(){ 2 3 var i = 00; 4 $('.RoomDeital_Inline').each(function(){ 5 i++; 6 var num = ( '000' + i ).slice( -2 ); 7 8 $('#SlideBox'+ num +' .bxslider').bxSlider({ 9 speed: 1000, 10 startSlide: 0, 11 moveSlides: 1, 12 controls: false, 13 infiniteLoop: true, 14 auto: false, 15 pager: true, 16 pagerCustom: '#SlideBox'+ num +' .bx-pager', 17 onSlideBefore: function(){ 18 $('#SlideBox'+ num +' .bx-pager').css('pointer-events','none'); 19 }, 20 onSlideAfter: function(){ 21 $('#SlideBox'+ num +' .bx-pager').css('pointer-events','auto'); 22 } 23 }); 24 }); 25});
試したこと
グループ内のスライドが全て連動してしまう原因はクラス名が全て同じ事が原因かと思いますので、JSで「#SlideBox」に順番に数字がつくようにしているのと同じように「.bxslider」や「.bx-pager」にも数字がつくように試してみましたが、スライダー自体が崩れてしまいました。
問題解決のために試したソースコード
HTML
1<section id="SlideBox01" class="RoomDeital_Inline"> 2 3 <div class="Slide"> 4 <ul class="bxslider01 clearfix"> 5 <li><img src="/images/detail/01.jpg" alt="" /></li> 6 <li><img src="/images/detail/02.jpg" alt="" /></li> 7 <li><img src="/images/detail/03.jpg" alt="" /></li> 8 <li><img src="/images/detail/04.jpg" alt="" /></li> 9 </ul> 10 </div> 11 <div class="bx-pager01"> 12 <ul class="clearfix"> 13 <li><a data-slide-index="0" href="" class="thumb-edge"><img src="/images/detail/01.jpg" /></a> </li> 14 <li><a data-slide-index="1" href=""><img src="/images/detail/02.jpg" /></a> </li> 15 <li><a data-slide-index="2" href=""><img src="/images/detail/03.jpg" /></a> </li> 16 <li><a data-slide-index="3" href=""><img src="/images/detail/04.jpg" /></a> </li> 17 </ul> 18 </div> 19 20 21 22 <div class="Slide"> 23 <ul class="bxslider02 clearfix"> 24 <li><img src="/images/detail/05.jpg" alt="" /></li> 25 <li><img src="/images/detail/06.jpg" alt="" /></li> 26 <li><img src="/images/detail/07.jpg" alt="" /></li> 27 </ul> 28 </div> 29 <div class="bx-pager02"> 30 <ul class="clearfix"> 31 <li><a data-slide-index="4" href="" class="thumb-edge"><img src="/images/detail/05.jpg" /></a> </li> 32 <li><a data-slide-index="5" href=""><img src="/images/detail/06.jpg" /></a> </li> 33 <li><a data-slide-index="6" href=""><img src="/images/detail/07.jpg" /></a> </li> 34 </ul> 35 </div> 36 37</section>
■試したjavascriptその1
javascript
1 2$(window).load(function(){ 3 4 var i = 00; 5 $('.RoomDeital_Inline').each(function(){ 6 i++; 7 var num = ( '000' + i ).slice( -2 ); 8 9 $('#SlideBox'+ num +' .bxslider'+ num).bxSlider({ 10 speed: 1000, 11 startSlide: 0, 12 moveSlides: 1, 13 controls: false, 14 infiniteLoop: true, 15 auto: false, 16 pager: true, 17 pagerCustom: '#SlideBox'+ num +' .bx-pager'+ num, 18 onSlideBefore: function(){ 19 $('#SlideBox'+ num +' .bx-pager'+ num).css('pointer-events','none'); 20 }, 21 onSlideAfter: function(){ 22 $('#SlideBox'+ num +' .bx-pager'+ num).css('pointer-events','auto'); 23 } 24 }); 25 }); 26});
■試したjavascriptその2
javascript
1 2$(window).load(function(){ 3 4 var i = 00; 5 $('.RoomDeital_Inline').each(function(e){ 6 i++; 7 var num = ( '000' + i ).slice( -2 ); 8 9 $('#SlideBox'+ num +' .bxslider'+ e).bxSlider({ 10 speed: 1000, 11 startSlide: 0, 12 moveSlides: 1, 13 controls: false, 14 infiniteLoop: true, 15 auto: false, 16 pager: true, 17 pagerCustom: '#SlideBox'+ num +' .bx-pager'+ e, 18 onSlideBefore: function(){ 19 $('#SlideBox'+ num +' .bx-pager'+ e).css('pointer-events','none'); 20 }, 21 onSlideAfter: function(){ 22 $('#SlideBox'+ num +' .bx-pager'+ e).css('pointer-events','auto'); 23 } 24 }); 25 }); 26});
最後に
「.bxslider」や「.bx-pager」に連番で数字をつける事で不具合解消すると考えておりましたが、
連番のつける方法が間違っていたのでしょうか。
もしくは、そもそも解消方法自体が間違いだったのでしょうか？
素人の考えと説明で分かりにくい部分があるかもしれませんが、よろしくお願い致します。
回答1件
0
ベストアンサー
「.bxslider」「.bx-pager」を一つのdiv内に入れて、それをeachで処理して回るのが一番手早いと思います。
HTML
1<section id="SlideBox01" class="RoomDeital_Inline"> 2 3 <div class="SlideWrap"> 4 <div class="Slide"> 5 <ul class="bxslider clearfix"><!-- 略 --></ul> 6 </div> 7 <div class="bx-pager"> 8 <ul class="clearfix"><!-- 略 --></ul> 9 </div> 10 </div><!-- End SlideWrap --> 11 12 <div class="SlideWrap"> 13 <div class="Slide"> 14 <ul class="bxslider clearfix"><!-- 略 --></ul> 15 </div> 16 <div class="bx-pager"> 17 <ul class="clearfix"><!-- 略 --></ul> 18 </div> 19 </div><!-- End SlideWrap --> 20 21</section>
js
1$( '.SlideWrap' ).each( function( i ){ 2 $( this ).find( '.bxslider' ).addClass( 'bxslider_'+ i ); 3 $( this ).find( '.bx-pager' ).addClass( 'bx-pager_'+ i ); 4 $( '.bxslider_'+ i ).bxSlider( { 5 speed: 1000, 6 startSlide: 0, 7 moveSlides: 1, 8 controls: false, 9 infiniteLoop: true, 10 auto: false, 11 pager: true, 12 pagerCustom: '.bx-pager_'+ i, 13 onSlideBefore: function(){ 14 $( '.bx-pager_'+ i ).css('pointer-events','none'); 15 }, 16 onSlideAfter: function(){ 17 $( '.bx-pager_'+ i ).css('pointer-events','auto'); 18 } 19 }); 20}); // 未テスト
投稿2019/04/01 15:59
総合スコア69400
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/01 16:48