現在WordPressによる投稿を、タブ内に出力しスライダーで表示しています。
しかし、タブの切替を行うと、切り替え後のタブ内のレイアウトが崩れて表示されてしまいます。
どのように崩れるかといいますと、スライダーなので、横並びになるはずのボックスが、縦並びの状態で表示されます。
一度表示して崩れている状態で、もう一度同じタブをクリックすると、表示がキレイに収まるのですが、
タブを切り替えた時点でキレイに表示させるのが理想です。
そもそも、スタイダーとタブの併用が出来ないのか、、、
使用したJSの相性なのか、判断も付きません。
理想の表現が出来るのであれば、現在使用しているJSにこだわりはありません。
無知なのに、難しいことに手を出しているのは分かっているのですが、、、
何卒ご指導をお願い致します。
「〇〇を△△して、□□にしたら良いんじゃない?」みたいな事が理解できないことが多いので、
出来れば、改変したコードを指示頂けると助かります。。。
スライダーは、「slick.js」を使用
タブはコチラで紹介頂いている情報で表示しています。
http://qiita.com/takanorip/items/078682784ddab03d1c4e
JavaScript
1$(function() { 2var slick = $('.pickup_item_list').slick({ 3infinite: true, 4dots:false, 5slidesToShow: 5, 6slidesToScroll: 1, 7responsive: [{ 8breakpoint: 600, 9settings: { 10slidesToShow: 3, 11slidesToScroll: 1, 12} 13},{ 14breakpoint: 380, 15settings: { 16slidesToShow: 2, 17slidesToScroll: 1, 18} 19} 20] 21}); 22$('#top_pickup_nav').click(function(){ 23slick.slick('reinit'); 24}); 25});
html
1<!-- ここからタブ--> 2<input id="pickup_id0" class="panel-radios" type="radio" name="tab-radios" checked> 3<input id="pickup_id1" class="panel-radios" type="radio" name="tab-radios"> 4<input id="pickup_id2" class="panel-radios" type="radio" name="tab-radios"> 5<input id="pickup_id3" class="panel-radios" type="radio" name="tab-radios"> 6<input id="pickup_id4" class="panel-radios" type="radio" name="tab-radios"> 7<input id="pickup_id5" class="panel-radios" type="radio" name="tab-radios"> 8<input id="pickup_id6" class="panel-radios" type="radio" name="tab-radios"> 9<ul id="top_pickup_nav"> 10<li id="pickup_id0_label"><label class="panel-label" for="pickup_id0">タブ1</label></li> 11<li id="pickup_id1_label"><label class="panel-label" for="pickup_id1">タブ2</label></li> 12<li id="pickup_id2_label"><label class="panel-label" for="pickup_id2">タブ3</label></li> 13<li id="pickup_id3_label"><label class="panel-label" for="pickup_id3">タブ4</label></li> 14<li id="pickup_id4_label"><label class="panel-label" for="pickup_id4">タブ5</label></li> 15<li id="pickup_id5_label"><label class="panel-label" for="pickup_id5">タブ6</label></li> 16<li id="pickup_id6_label"><label class="panel-label" for="pickup_id6">タブ7</label></li> 17</ul> 18<!-- ここまでタブ--> 19 20<div id="top_pickup_content"> 21<!-- ここからタブ内容--> 22<div id="pickup_id0_content" class="top_pickup_content"> 23<ul class="slider pickup_item_list"> 24<!-- ここからスライダー部分でWordPressで出力--> 25<li>このリスト内容をWordPressで出力し、スライダーで表示しています</li> 26<!-- ここまでスライダー部分でWordPressで出力--> 27</ul> 28</div> 29<!-- ここまでタブ内容--> 30・ 31・ 32・ 33・ 34<!-- このタブ内容がタブの数分繰り返しています--> 35</div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/04/26 13:32