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

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

新規登録して質問してみよう
ただいま回答率
85.50%
スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

5281閲覧

タブと切り替えとスライダーの併用を可能にしたい

退会済みユーザー

退会済みユーザー

総合スコア0

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

1クリップ

投稿2017/04/26 07:02

現在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<!-- ここまでタブ内容--> 3031323334<!-- このタブ内容がタブの数分繰り返しています--> 35</div>

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

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

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

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

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

guest

回答1

0

ベストアンサー

再現実験をしていないので出来るかわからないですが、下記のようにしてみてはどうでしょう。

JavaScript

1// $('#top_pickup_nav').click(function(){slick.slick('reinit');}); 2// ↓ 3 $('.panel-radios').on( 'change', function(){ slick.slick( 'reinit' ); } );

投稿2017/04/26 11:40

kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2017/04/26 13:32

kei344様 いつもお世話になります! 頂いたコードで、無事に解決いたしました! 本当にありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問