###前提・実現したいこと
1ページに複数のbxsliderを利用して
それぞれのliでPrevIcon
NextIcon
を適用させたいです。
###発生している問題・エラーメッセージ
PrevIcon
NextIcon
をクリックした時に最後のliのみ適用されます。
###該当のソースコード
html
1<li> 2 <h5><?php the_title(); ?></h5> 3 <div class="performance-list-wrap clearfix"> 4 <div class="performance-img figure"> 5 <ul class="main-thumb"> 6 <li><?php the_post_thumbnail('large'); ?></li> 7 <li><?php the_post_thumbnail('large'); ?></li> 8 <li><?php the_post_thumbnail('large'); ?></li> 9 </ul> 10 <div class="box_thumb"> 11 <div class="warp_thumb"> 12 <ul class="thumb custom-thumb clearfix"> 13 <li><a data-slide-index="0" href="#"><img src="test.png" /></a><i class="fa fa-search-plus" aria-hidden="true"></i></li> 14 <li><a data-slide-index="1" href="#"><img src="test1.png" /></a><i class="fa fa-search-plus" aria-hidden="true"></i></li> 15 <li><a data-slide-index="2" href="#"><img src="test2.png" /></a><i class="fa fa-search-plus" aria-hidden="true"></i></li> 16 </ul> 17 <div class="PrevIcon"></div> 18 <div class="NextIcon"></div> 19 </div><!-- /.warp_thumb --> 20 </div><!-- /.box_thumb --> 21 </div><!-- /.figure --> 22 </div> 23</li> 24<li> 25 <h5><?php the_title(); ?></h5> 26 <div class="performance-list-wrap clearfix"> 27 <div class="performance-img figure"> 28 <ul class="main-thumb"> 29 <li><?php the_post_thumbnail('large'); ?></li> 30 <li><?php the_post_thumbnail('large'); ?></li> 31 <li><?php the_post_thumbnail('large'); ?></li> 32 </ul> 33 <div class="box_thumb"> 34 <div class="warp_thumb"> 35 <ul class="thumb custom-thumb clearfix"> 36 <li><a data-slide-index="0" href="#"><img src="test.png" /></a><i class="fa fa-search-plus" aria-hidden="true"></i></li> 37 <li><a data-slide-index="1" href="#"><img src="test1.png" /></a><i class="fa fa-search-plus" aria-hidden="true"></i></li> 38 <li><a data-slide-index="2" href="#"><img src="test2.png" /></a><i class="fa fa-search-plus" aria-hidden="true"></i></li> 39 </ul> 40 <div class="PrevIcon"></div> 41 <div class="NextIcon"></div> 42 </div><!-- /.warp_thumb --> 43 </div><!-- /.box_thumb --> 44 </div><!-- /.figure --> 45 </div> 46</li>
javascript
1<script type="text/javascript"> 2jQuery(function($){ 3 $('.main-thumb').bxSlider({ 4 mode: 'fade', 5 pagerCustom: '.custom-thumb', 6 controls: false 7 }); 8}); 9</script> 10<script type="text/javascript"> 11jQuery(function($){ 12 $('.custom-thumb').bxSlider({ 13 pager:false, 14 minSlides: 4, //1スライド内のサムネイルの数 15 maxSlides: 4, //1スライド内のサムネイルの最大数 16 slideWidth: 100, //サムネイルの横幅(単位はpx) 17 slideMargin: 5, //サムネイル間の余白(単位はpx) 18 moveSlides:1, 19 nextSelector: '.NextIcon', //"次へ”矢印をカスタマイズするための記述 20 prevSelector: '.PrevIcon'//"前へ”矢印をカスタマイズするための記述 21 }); 22}); 23</script>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/31 14:14