前提・実現したいこと
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ファイルを使って実装しています。
回答1件
あなたの回答
tips
プレビュー