質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

10534閲覧

1ページに複数のbxsliderを使いたい

ssk

総合スコア332

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/07/30 05:17

編集2017/07/31 08:34

###前提・実現したいこと
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>

###追記
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

コードを一旦見直した方がいいと思います。
申し訳ないですが、今はひとつひとつの機能を考えずなりゆきでどうにか完成に近づけて詰まってしまったって感じがします。
やりたいであろうことの最小コードを送りますのでBxSliderのJsとCssを読み込んで表示してみてください。間違いなければこのコードを参考に訂正してみてください。

javascript

1<!DOCTYPE html> 2<html> 3<head> 4<title>Multiple slideshows</title> 5<meta charset="utf-8"> 6<!-- BXSliderのCSSを読みこんでください --> 7<link rel="stylesheet" href="jquery.bxslider.min.css" type="text/css"> 8<style> 9 .bx-wrapper{ margin-bottom: 10px; } 10 .bx-viewport{ padding: 0; margin: 0; } 11 .slideWrap{ margin-bottom: 30px; padding: 10px; background-color: #ccc;} 12 #bxslider1 li, 13 #bxslider2 li{ 14 text-align: center; 15 width: 100%; 16 height: 100px; 17 } 18 #bx-pager1 a, 19 #bx-pager2 a{ 20 text-align: center; 21 width: 100px; 22 height: 100px; 23 } 24 25</style> 26</head> 27<body> 28 29<!-- slider1 --> 30<div class="slideWrap"> 31 <ul id="bxslider1"> 32 <li>a</li> 33 <li>b</li> 34 <li>c</li> 35 <li>d</li> 36 <li>e</li> 37 </ul> 38 39 <ul id="bx-pager1"> 40 <a data-slide-index="" href="">a</a> 41 <a data-slide-index="" href="">b</a> 42 <a data-slide-index="" href="">c</a> 43 <a data-slide-index="" href="">d</a> 44 <a data-slide-index="" href="">e</a> 45 </ul> 46 47 <div id="PrevIcon1"></div> 48 <div id="NextIcon1"></div> 49</div> 50<!-- slider1 end --> 51 52 53<!-- slider2 --> 54<div class="slideWrap"> 55 <ul id="bxslider2"> 56 <li>a2</li> 57 <li>b2</li> 58 <li>c2</li> 59 <li>d2</li> 60 <li>e2</li> 61 </ul> 62 63 <div id="bx-pager2"> 64 <a data-slide-index="" href="">a2</a> 65 <a data-slide-index="" href="">b2</a> 66 <a data-slide-index="" href="">c2</a> 67 <a data-slide-index="" href="">d2</a> 68 <a data-slide-index="" href="">e2</a> 69 </div> 70 71 <div id="PrevIcon2"></div> 72 <div id="NextIcon2"></div> 73</div> 74<!-- slider2 end --> 75 76<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 77<!-- BXSliderのJS読みこんでください --> 78<script src="jquery.bxslider.min.js"></script> 79 80<script type="text/javascript"> 81 82jQuery(function($){ 83 84 //slider1 /////////// 85 var sldier1 = $('#bxslider1').bxSlider({ 86 mode: 'fade', 87 controls: false 88 }); 89 90 //data-slide-indexの値を手動で入れるのは危ないので自動で入るようにしました。 91 $.each($('#bx-pager1 > a'),function(idx,elm){ 92 $(elm).attr('data-slide-index',idx); 93 }); 94 95 $('#bx-pager1').bxSlider({ 96 pager:false, 97 minSlides: 4, 98 maxSlides: 4, 99 slideWidth: 100, 100 slideMargin: 10, 101 moveSlides:1, 102 nextSelector: '#NextIcon1', 103 prevSelector: '#PrevIcon1' 104 }); 105 106 $('#bx-pager1 > a').on('click',function(){ 107 var idx = $(this).data("slide-index"); 108 sldier1.goToSlide(idx); 109 return false; 110 }); 111 112 113 114 //slider2 ////////// 115 var sldier2 = $('#bxslider2').bxSlider({ 116 mode: 'fade', 117 controls: false 118 }); 119 120 //data-slide-indexの値を手動で入れるのは危ないので自動で入るようにしました。 121 $.each($('#bx-pager2 > a'),function(idx,elm){ 122 $(elm).attr('data-slide-index',idx); 123 }); 124 125 $('#bx-pager2').bxSlider({ 126 pager:false, 127 minSlides: 4, 128 maxSlides: 4, 129 slideWidth: 100, 130 slideMargin: 10, 131 moveSlides:1, 132 nextSelector: '#NextIcon2', 133 prevSelector: '#PrevIcon2' 134 }); 135 136 $('#bx-pager2 > a').on('click',function(){ 137 var idx = $(this).data("slide-index"); 138 sldier2.goToSlide(idx); 139 return false; 140 }); 141 142}) 143 144</script> 145 146</body>

投稿2017/07/31 12:13

IShix

総合スコア1724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ssk

2017/07/31 14:14

やはり、IDを複数設定し jqueryもその分用意しないと厳しそうですね。 サンプルコード、ありがとうございます。
guest

0

前提として調べてみました。

BxSliderは複数のスライダーを指定しても問題無い
http://bxslider.com/examples/multiple-slideshows

###.main-thumbで controls: false が原因?

PrevIcon NextIconをクリックした時に最後のliのみ適用されます。

質問の意図が読み取れていなければすみません。
「2つスライダー設置しているのに1つしかナビが表示されない」ということでしたらcontrols: falseを消してみてください。表示されるはずです。

[Officialから抜粋]

controls
If true, "Next" / "Prev" controls will be added
default: true
options: boolean (true / false)
[翻訳]
コントローラー(次へと戻るボタン)
もし controlsの値がtrueの場合、次へと戻るボタンが表示されます。
デフォルト(初期値)はtrueです。

http://bxslider.com/options

javascript

1 $('.main-thumb').bxSlider({ 2 mode: 'fade', 3 pagerCustom: '.custom-thumb', 4 controls: false 5 });

controls: falseを消す

javascript

1 $('.main-thumb').bxSlider({ 2 mode: 'fade', 3 pagerCustom: '.custom-thumb' 4 });

###質問とは関係ありませんができれば直した方がいいかもです。1

javascript

1jQuery(function($){ コード });

これは</body>までの読み込みが完了したらfunction内を実行してくださいって意味です。今複数書いているのでひとまとめにした方がいいと思います。

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 $('.custom-thumb').bxSlider({ 10 pager:false, 11 minSlides: 4, //1スライド内のサムネイルの数 12 maxSlides: 4, //1スライド内のサムネイルの最大数 13 slideWidth: 100, //サムネイルの横幅(単位はpx) 14 slideMargin: 5, //サムネイル間の余白(単位はpx) 15 moveSlides:1, 16 nextSelector: '.NextIcon', //"次へ”矢印をカスタマイズするための記述 17 prevSelector: '.PrevIcon'//"前へ”矢印をカスタマイズするための記述 18 }); 19}); 20</script>

###質問とは関係ありませんができれば直した方がいいかもです。2

javascript

1$('.main-thumb')

IDでcssを指定する場合、そのHTML内に登場するIDは一つだけですよね?クラスの場合は複数存在する可能性があります。なのでクラスの場合、JavascriptはすべてのHTMLを上から順に最後まで探た後スライダーで使う準備をします。IDの場合は見つけた時点で準備を始めます。まとめると以下の感じです。

  • セレクタ($(""))をクラスで指定した場合、HTMLの内容をすべて読み込んだ後、解析終了
  • セレクタ($(""))をIDで指定した場合、IDを見つけた時点で解析終了

といった特性があります。Jqueryを使う場合、理由が無い限りID指定した方がいいです。

どうしてもクラスを指定する場合は$("#id名 > 要素名")このようにするとそのID以下を探すので速度が速いです。

投稿2017/07/30 17:17

編集2017/07/30 17:27
IShix

総合スコア1724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ssk

2017/07/31 08:36

IShikawan様、ありがとうございます。 助言の通り、jQuery(function($){ コード });を変更しました。 私の文章力がなく、申し訳ございません。 情報を追記しましたので、お目通しいただけますか? よろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問