Q&A
コードはコードブロックに入れてください。これだけの規模になると生文字列から解読する気にはならないです。
前提・実現したいこと
タブで切り替えした要素の中にjQueryプラグイン（slick.js）を使用したスライダーを設置しています。用途としては、カテゴリー毎の商品ランキングで使用したいと思っています。スライダーでは商品は4つ並びで、左右のボタンで8つの商品が順番で切り替えができるようになっています。他のタブを押すことでカテゴリーの切り替えができ、別カテゴリーの商品が4つ並びます。
初期の画面では問題ないのですが、タブを切り替えた際に1つ目から4つ目までの商品を表示させたいのですが、5つ目から8つ目までの商品が表示されてしまいます。商品数を7つにすると、4つ目から7つ目までの商品が表示されました。
タブで切り替えた際に、1つ目から4つ目までの4つの商品を表示させるにはどうしたらよいでしょうか。お分かりの方、お力を貸していただければ幸いです。よろしくお願いします。
slick
http://kenwheeler.github.io/slick/
【追加】9/6
タブを切り替えた後、、5つ目から8つ目までが表示されている際に、左右のボタンを押した時、4つ商品が移動する（1つ目から4つ目が表示されるはず）のですが、移動後も同じ5つ目から8つ目までが表示されてしまう場合がありました。
HTML
<!DOCTYPE html> <head> <link rel="stylesheet" href="./css/slick.css"> <!--slick.jsのファイル--> <link rel="stylesheet" href="./css/slick-theme.css"> <!--slick.jsのファイル--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="./js/slick.min.js"></script> <!--slick.jsのファイル--> </head> <body> <div id="ranking"> <h2>ランキング</h2> <div class="tab_wrap"> <input id="tab1" class="tabtab" type="radio" name="tab_btn" checked> <input id="tab2" class="tabtab" type="radio" name="tab_btn"> <div class="tab_area"> <label class="tab1_label" for="tab1">カテゴリー1</label> <label class="tab2_label" for="tab2">カテゴリー2</label> </div> <div class="panel_area"> <div id="panel1" class="tab_panel"> <div class="multiple-items"> <div class="box"><a href="#"> <img src="/img/item01.jpg"> <div class="title">商品名A</div> <div class="price">金額</div> <div class="number">1位</div></a> </div> <div class="box"><a href="#"> <img src="/img/item02.jpg"> <div class="title">商品名B</div> <div class="price">金額</div> <div class="number">2位</div></a> </div> <div class="box"><a href="#"> <img src="/img/item03.jpg"> <div class="title">商品名C</div> <div class="price">金額</div> <div class="number">3位</div></a> </div> <div class="box"><a href="#"> <img src="/img/item04.jpg"> <div class="title">商品名D</div> <div class="price">金額</div> <div class="number">4位</div></a> </div> <div class="box"><a href="#"> <img src="/img/item05.jpg"> <div class="title">商品名E</div> <div class="price">金額</div> <div class="number">5位</div></a> </div> <div class="box"><a href="#"> <img src="/img/item06.jpg"> <div class="title">商品名F</div> <div class="price">金額</div> <div class="number">6位</div></a> </div> <div class="box"><a href="#"> <img src="/img/item07.jpg"> <div class="title">商品名G</div> <div class="price">金額</div> <div class="number">7位</div></a> </div> <div class="box"><a href="#"> <img src="/img/item08.jpg"> <div class="title">商品名H</div> <div class="price">金額</div> <div class="number">8位</div></a> </div> </div> </div> <div id="panel2" class="tab_panel"> <div class="multiple-items"> <div class="box"><a href="#"> <img src="/img/item01.jpg"> <div class="title">商品名I</div> <div class="price">金額</div> <div class="number">1位</div></a> </div> <div class="box"><a href="#"> <img src="/img/item02.jpg"> <div class="title">商品名J</div> <div class="price">金額</div> <div class="number">2位</div></a> </div> <div class="box"><a href="#"> <img src="/img/item03.jpg"> <div class="title">商品名K</div> <div class="price">金額</div> <div class="number">3位</div></a> </div> <div class="box"><a href="#"> <img src="/img/item04.jpg"> <div class="title">商品名L</div> <div class="price">金額</div> <div class="number">4位</div></a> </div> <div class="box"><a href="#"> <img src="/img/item05.jpg"> <div class="title">商品名M</div> <div class="price">金額</div> <div class="number">5位</div></a> </div> <div class="box"><a href="#"> <img src="/img/item06.jpg"> <div class="title">商品名N</div> <div class="price">金額</div> <div class="number">6位</div></a> </div> <div class="box"><a href="#"> <img src="/img/item05.jpg"> <div class="title">商品名O</div> <div class="price">金額</div> <div class="number">7位</div></a> </div> <div class="box"><a href="#"> <img src="/img/item06.jpg"> <div class="title">商品名P</div> <div class="price">金額</div> <div class="number">8位</div></a> </div> </div> </div> </div> </div> </div> </body> </html>
JS
<!-- 人気ランキングスライダー --> <script> $(function() { var slick = $('.multiple-items').slick({ infinite: true, dots:false, initialSlide:0, slidesToShow: 4, slidesToScroll: 4 }); $('.tabtab').on( 'change', function(){ slick.slick( 'reinit' ); slick.slick('setPosition'); } ); }); </script>
CSS
#ranking{ position:relative; } #ranking{ position:relative; } .tab_wrap{ width:900px; } input[type="radio"]{display:none;} .tab_area{ font-size:0; margin:0 15px; } .tab_area label{ width:135px; display:inline-block; padding:10px; color:#fff; background:#b8b7b7; font-size:16px; cursor:pointer; margin:0 5px 0; } .panel_area{ background:#d1f5ff; } .tab_panel{ width:100%; padding:15px 40px 25px; display:none; box-sizing:border-box; } .tab_panel p{ font-size:14px; letter-spacing:1px; text-align:center; } #tab1:checked ~ .tab_area .tab1_label{background:#00c4fd; } #tab1:checked ~ .panel_area #panel1{display:block;} #tab2:checked ~ .tab_area .tab2_label{background:#00c4fd; } #tab2:checked ~ .panel_area #panel2{display:block;} .slick-track{ margin:0; } .box{ box-sizing:border-box; padding:10px 5px; background:#fff; position:relative; } .box img{ width:150px; height:150px; display:block; margin:0 auto 5px; } .number{ position:absolute; left:8px; top:40px; background:#00c4fd; width:40px; color:#fff; } .slick-prev::before ,.slick-next::before { content: '\f104'; font-family:FontAwesome; color: #fff; background: #00c4fd; padding: 20px 5px; } .slick-next::before { content: '\f105'; } button.slick-next{ display:block; } .slick-initialized .slick-slide { margin: 0 5px; }
ご指摘ありがとうございます。すいません。初めてで使い方が良くわかっていませんでした。修正させていただきました。
https://jsfiddle.net/xpvt214o/740621/ とりあえず適当な画像を使って再現させてみようと思ったんですが、タブの切替が動作しないので無理でした。タブ切替処理もご提示ください。というか質問の事象が再現可能なコードをご提示ください。
ご対応ありがとうございます。大変失礼しました。同じ現象が確認できるコードに修正させていただきました。文字数の関係でタブの数を1つ減らしております。また、文章に一部【追加】をさせていただいております。タブを切り替えることができれば、すぐに確認ができるかと存じます。
回答1件
0
ベストアンサー
https://jsfiddle.net/xpvt214o/744849/
思ってるように動くと思います。
まず、悪さをしているのはこいつです。
slick.slick( 'reinit' );
これイベントなので、タブを切り替えるたびにslickに「再初期化されたよー」と通知してしまい、余計な処理が走ってるようです。
5～8位が2セット表示されたりしてぶっ壊れてました。
で、おそらくタブの移動をすると再度1位から表示したいんだろうなーと思い、
slick.slick('slickGoTo', 1);
これを追加しています。
こうです。
js
1$('.tabtab').on('change', function() { 2 slick.slick('setPosition'); 3 slick.slick('slickGoTo', 1); 4});
投稿2018/09/06 02:11
総合スコア1803
ありがとうございます。教えたいただいたように修正したら思ったように動くようになりました。JavaScriptは初心者なので、少しずつ勉強していきたいと思います。本当にありがとうございました。
あなたの回答
tips
プレビュー
