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

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

ただいまの
回答率

88.92%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,383

nachou

score 9

 前提・実現したいこと

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ファイルを使って実装しています。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/10/31 20:49

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

    キャンセル

  • nachou

    2018/10/31 22:42

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

    キャンセル

  • kei344

    2018/10/31 23:12

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

    キャンセル

  • nachou

    2018/11/01 09:01

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

    キャンセル

回答 1

checkベストアンサー

0

ぎり動くところまで修正。

  1. slickのUL/LIでの使用には問題がある(文法的にも動作的にも)
  2. slider.slick('setPosition'); を使うには個別に変数を保存しておく必要がある(コードの変数a,b
  3. ラジオボタンを利用したCSSはクリックイベント後のタイミングで切り替わるので、setTimeoutで待たないと幅の取得に失敗する
var s = [];
$(function() {
  $('.tab_content').each(function() {
     var a = $('.thumb-item',this).slick({
          infinite: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: false,
          fade: true,
          asNavFor: '.thumb-item-nav' //サムネイルのクラス名
     });
     var b = $('.thumb-item-nav',this).slick({
          infinite: true,
          slidesToShow: 6,
          slidesToScroll: 1,
          asNavFor: '.thumb-item', //スライダー本体のクラス名
          focusOnSelect: true,
     });
     s.push( [ a, b ] );
  });
  $('.tab_item').each(function( i ) {
      $(this).click(function(){
      setTimeout(function(){
        s[ i ][ 0 ].slick('setPosition');
        s[ i ][ 1 ].slick('setPosition');
      }, 1);
    });
    });
});

動くサンプル:https://jsfiddle.net/bLswxaq8/1/


公式のサンプルに入れ子状態のスライダーがある Swiper にして、タブもそれで実装してしまえばどうでしょう。

【Swiper - Most Modern Mobile Touch Slider】
https://idangero.us/swiper/

【レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.|神戸にあるウェブ制作会社】
https://www.willstyle.co.jp/blog/724/

【Swiperさんに敬意を評していろいろメモっとこうそうしよう 入れ子での使い方注意点 | hirokona】
https://hirokonakahara.com/blog/?p=2410

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/02 09:18

    ご回答、ありがとうございます!
    ご提示いただいた修正コードを試してみたところ、
    思っていた通りの動きとなりました。
    ありがとうございます。

    ただひとつだけ問題が出てしまいました…
    ページリロード時や初期状態のとき、タブBが表示されるようにしていたいのですが
    何も表示されず、どちらかのタブをクリックするとタブの内容が表示されるという挙動になっています。

    表示されるタイミング等の調整があるのでしょうか?
    申し訳ありませんが引き続きお力を貸していただければ幸いです。

    キャンセル

  • 2018/11/02 09:26

    ご回答ありがとうございました!
    テスト用のタブを同じページに表示していたのを忘れており、
    それを削除すれば解決いたしました。(汗)
    申し訳ありません。。

    上記の修正コードで問題なく動きましたので
    ベストアンサーにさせていただきます!

    この度は、大変助かりました。
    kei344様、
    お力添えありがとうございました!

    キャンセル

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

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る