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

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

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

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

6566閲覧

slick.jsをタブの中で動作させたいです。

nachou

総合スコア11

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/10/31 08:19

編集2018/10/31 23:57

前提・実現したいこと

cssで実装したタブの中で、slick.jsを使用した
サムネイルを選択するとメイン画像が切り替わるスライドを
正常に動かしたいのですが、上手くいきません。

発生している問題・エラーメッセージ

最初に表示されるタブAは正常通り表示されるのですが、
タブBに切り替えるとメイン画像Bが表示されません。

該当のソースコード

<!-- footer --> $(function() { $('.thumb-item').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.thumb-item-nav' //サムネイルのクラス名 }); $('.thumb-item-nav').slick({ infinite: true, slidesToShow: 6, slidesToScroll: 1, asNavFor: '.thumb-item', //スライダー本体のクラス名 focusOnSelect: true, }); }); });
<!-- タブHTML --> <div class="tabs"> <input id="order" type="radio" name="tab_item"> <label class="tab_item be-af" for="order">タブA</label> <input id="reform" type="radio" name="tab_item" checked> <label class="tab_item be-af" for="reform">タブB</label> <!-- タブA --> <div class="tab_content" id="order_content"> <div class="detail"> <!-- メイン画像A --> <ul class="thumb-item"> <li> <img src="a.jpg" alt=""/> </li> </ul> <!-- サムネイルA --> <ul class="thumb-item-nav"> <li> <img src="a-thumb.jpg" alt=""/> </li> </ul> </div> </div> <!-- タブB --> <div class="tab_content" id="reform_content"> <div class="detail"> <!-- メイン画像B --> <ul class="thumb-item"> <li> <img src="b.jpg" alt=""/> </li> </ul> <!-- サムネイルB --> <ul class="thumb-item-nav"> <li> <img src="b-thumb.jpg" alt="" /> </li> </ul> </div> </div> </div> <!-- /タブHTML -->
<!-- タブcss --> .tab_item { width: calc(100%/2); height: 40px; } /*ラジオボタンを全て消す*/ input[name="tab_item"] { display: none; } /*タブ切り替えの中身のスタイル*/ .tab_content { display: none; clear: both; overflow: hidden; } /*選択されているタブのコンテンツのみを表示*/ #order:checked ~ #order_content, #reform:checked ~ #reform_content { display: block; }

試したこと

タブ切り替えのinputに『tab-btn』というclassを付けて

$('.tab-btn').click(function(){ slider.slick('setPosition'); });

を追加してみましたが、表示はできませんでした。
おかしい記述等ございますでしょうか?
ご教授よろしくお願いいたします。

補足情報(FW/ツールのバージョンなど)

wordpress環境下ですが、
wordpressプラグインではありません。
slickの公式サイトよりダウンロードしたjsファイルを使って実装しています。

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

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

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

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

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

m.ts10806

2018/10/31 11:49

WordPressは当件に直接関係ありますか?WordPressのプラグインから利用かどうかは明記されたほうが良いかと思います。
nachou

2018/10/31 13:42

ご指摘ありがとうございます。補足にて明記させていただきました。
kei344

2018/10/31 14:12

提示されているHTML/CSSではそもそもタブも動きません。書かれている状況が再現するコード(HTML/CSS/JavaScript)か、再現するURLを提示されたほうが回答を得やすいと思います。
nachou

2018/11/01 00:01

ご指摘ありがとうございます。タブ部分のclass名が間違えておりました。申し訳ありません(汗)訂正いたしました。
guest

回答1

0

ベストアンサー

ぎり動くところまで修正。
0. slickのUL/LIでの使用には問題がある(文法的にも動作的にも)
0. slider.slick('setPosition'); を使うには個別に変数を保存しておく必要がある(コードの変数a,b
0. ラジオボタンを利用したCSSはクリックイベント後のタイミングで切り替わるので、setTimeoutで待たないと幅の取得に失敗する

JavaScript

1var s = []; 2$(function() { 3 $('.tab_content').each(function() { 4 var a = $('.thumb-item',this).slick({ 5 infinite: true, 6 slidesToShow: 1, 7 slidesToScroll: 1, 8 arrows: false, 9 fade: true, 10 asNavFor: '.thumb-item-nav' //サムネイルのクラス名 11 }); 12 var b = $('.thumb-item-nav',this).slick({ 13 infinite: true, 14 slidesToShow: 6, 15 slidesToScroll: 1, 16 asNavFor: '.thumb-item', //スライダー本体のクラス名 17 focusOnSelect: true, 18 }); 19 s.push( [ a, b ] ); 20 }); 21 $('.tab_item').each(function( i ) { 22 $(this).click(function(){ 23 setTimeout(function(){ 24 s[ i ][ 0 ].slick('setPosition'); 25 s[ i ][ 1 ].slick('setPosition'); 26 }, 1); 27 }); 28 }); 29}); 30```**動くサンプル:**[https://jsfiddle.net/bLswxaq8/1/](https://jsfiddle.net/bLswxaq8/1/) 31 32--- 33 34公式のサンプルに入れ子状態のスライダーがある Swiper にして、タブもそれで実装してしまえばどうでしょう。 35 36【Swiper - Most Modern Mobile Touch Slider】 37[https://idangero.us/swiper/](https://idangero.us/swiper/) 38 39【レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.|神戸にあるウェブ制作会社】 40[https://www.willstyle.co.jp/blog/724/](https://www.willstyle.co.jp/blog/724/) 41 42【Swiperさんに敬意を評していろいろメモっとこうそうしよう 入れ子での使い方注意点 | hirokona】 43[https://hirokonakahara.com/blog/?p=2410](https://hirokonakahara.com/blog/?p=2410)

投稿2018/11/01 18:34

kei344

総合スコア69366

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

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

nachou

2018/11/02 00:18

ご回答、ありがとうございます! ご提示いただいた修正コードを試してみたところ、 思っていた通りの動きとなりました。 ありがとうございます。 ただひとつだけ問題が出てしまいました… ページリロード時や初期状態のとき、タブBが表示されるようにしていたいのですが 何も表示されず、どちらかのタブをクリックするとタブの内容が表示されるという挙動になっています。 表示されるタイミング等の調整があるのでしょうか? 申し訳ありませんが引き続きお力を貸していただければ幸いです。
nachou

2018/11/02 00:26

ご回答ありがとうございました! テスト用のタブを同じページに表示していたのを忘れており、 それを削除すれば解決いたしました。(汗) 申し訳ありません。。 上記の修正コードで問題なく動きましたので ベストアンサーにさせていただきます! この度は、大変助かりました。 kei344様、 お力添えありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問