Q&Aタブ切り替えコンテンツ内にslickで作成した画像のスライドを配置しています。
最初に表示されているタブ内にあるスライドについては画像が表示されるのですが、
２つ目以降のタブをクリックしてコンテンツを表示させると、slickのスライド画像が遅れて表示されます。
slickに用意されているオプションのlazyLoadを設定してみたのですが、progressiveでもondemandでも結果は変わらずでした。
どうしたらタブ切り替えしてコンテンツが表示されると同時にスライドの画像が表示されるようになりますでしょうか。
ご教示の程よろしくお願いいたします。
jQuery
1//slick.js 2$(document).ready(function(){ 3 $('.slide1 ul').slick({ 4 accessibility: false, 5 autoplay: true, 6 autoplaySpeed: 4000, 7 speed: 2500, 8 adaptiveHeight: true, 9 fade: true, 10 pauseOnHover: false, 11 arrows: true, 12 dots: true, 13 prevArrow: "<div class='slick-prev flex-center'><img src='/img/top_works_arrow_left.png' /></div>", 14 nextArrow: "<div class='slick-next flex-center'><img src='/img/top_works_arrow_right.png' /></div>", 15 }); 16 $('.slide2 ul').slick({ 17 accessibility: false, 18 autoplay: true, 19 autoplaySpeed: 4000, 20 speed: 2500, 21 adaptiveHeight: true, 22 fade: true, 23 pauseOnHover: false, 24 arrows: true, 25 dots: true, 26 lazyLoad: 'progressive', 27 prevArrow: "<div class='slick-prev flex-center'><img src='/img/top_works_arrow_left.png' /></div>", 28 nextArrow: "<div class='slick-next flex-center'><img src='/img/top_works_arrow_right.png' /></div>", 29 }); 30 $('.slide3 ul').slick({ 31 accessibility: false, 32 autoplay: true, 33 autoplaySpeed: 4000, 34 speed: 2500, 35 adaptiveHeight: true, 36 fade: true, 37 lazyLoad: 'progressive', 38 pauseOnHover: false, 39 arrows: true, 40 dots: true, 41 prevArrow: "<div class='slick-prev flex-center'><img src='/img/top_works_arrow_left.png' /></div>", 42 nextArrow: "<div class='slick-next flex-center'><img src='/img/top_works_arrow_right.png' /></div>", 43 }); 44});
JQuery
1//タブ切り替え 2jQuery(function($){ 3 $('.tab').click(function(){ 4 $('.is-active').removeClass('is-active'); 5 $(this).addClass('is-active'); 6 $('.is-show').removeClass('is-show'); 7 // クリックしたタブからインデックス番号を取得 8 const index = $(this).index(); 9 // クリックしたタブと同じインデックス番号をもつコンテンツを表示 10 $('.pattern').eq(index).addClass('is-show'); 11 }); 12});
HTML
1<div class="patterns"> 2 <div class="tabs container"> 3 <div class="row"> 4 <div class="col-xl-10 mx-auto"> 5 <ul> 6 <li class="tab is-active"> 7 タブ1 8 </li> 9 <li class="tab"> 10 タブ2 11 </li> 12 <li class="tab"> 13 タブ3 14 </li> 15 </ul> 16 </div> 17 </div> 18 </div> 19 <div class="container"> 20 <div class="contents"> 21 <div class="pattern pattern1 is-show"> 22 <div class="col-xl-9 mx-auto wrap"> 23 <div class="slide slide1"> 24 <ul> 25 <li><img src="/img/modelhouse_pattern1_gallery1.jpg" alt=""><p>外観</p></li> 26 <li><img src="/img/modelhouse_pattern1_gallery2.jpg" alt=""><p>玄関（１）</p></li> 27 <li><img src="/img/modelhouse_pattern1_gallery3.jpg" alt=""><p>玄関（２）</p></li> 28 <li><img src="/img/modelhouse_pattern1_gallery4.jpg" alt=""><p>リビング・ダイニング（１）</p></li> 29 <li><img src="/img/modelhouse_pattern1_gallery9.jpg" alt=""><p>リビング・ダイニング（２）</p></li> 30 <li><img src="/img/modelhouse_pattern1_gallery10.jpg" alt=""><p>リビング・ダイニング（３）</p></li> 31 <li><img src="/img/modelhouse_pattern1_gallery5.jpg" alt=""><p>キッチン</p></li> 32 <li><img src="/img/modelhouse_pattern1_gallery7.jpg" alt=""><p>洗面台</p></li> 33 <li><img src="/img/modelhouse_pattern1_gallery6.jpg" alt=""><p>バスルーム（１）</p></li> 34 <li><img src="/img/modelhouse_pattern1_gallery8.jpg" alt=""><p>バスルーム（２）</p></li> 35 </ul> 36 </div> 37 </div> 38 </div> 39 <div class="pattern pattern2"> 40 <div class="col-xl-9 mx-auto wrap"> 41 <div class="slide slide2"> 42 <ul> 43 <li><img src="/img/modelhouse_pattern2_gallery1.jpg" alt=""><p>外観・エントランス</p></li> 44 <li><img src="/img/modelhouse_pattern2_gallery2.jpg" alt=""><p>玄関</p></li> 45 <li><img src="/img/modelhouse_pattern2_gallery3.jpg" alt=""><p>リビング・ダイニング（１）</p></li> 46 <li><img src="/img/modelhouse_pattern2_gallery4.jpg" alt=""><p>リビング・ダイニング（２）</p></li> 47 <li><img src="/img/modelhouse_pattern2_gallery5.jpg" alt=""><p>キッチン</p></li> 48 <li><img src="/img/modelhouse_pattern2_gallery6.jpg" alt=""><p>ロフト</p></li> 49 <li><img src="/img/modelhouse_pattern2_gallery7.jpg" alt=""><p>洋室</p></li> 50 <li><img src="/img/modelhouse_pattern2_gallery8.jpg" alt=""><p>バスルーム</p></li> 51 </ul> 52 </div> 53 </div> 54 </div> 55 <div class="pattern pattern3"> 56 <div class="col-xl-9 mx-auto wrap"> 57 <div class="slide slide3"> 58 <ul> 59 <li><img src="/img/modelhouse_pattern3_gallery4.jpg" alt=""><p>外観</p></li> 60 <li><img src="/img/modelhouse_pattern3_gallery8.jpg" alt=""><p>玄関</p></li> 61 <li><img src="/img/modelhouse_pattern3_gallery1.jpg" alt=""><p>リビング（１）</p></li> 62 <li><img src="/img/modelhouse_pattern3_gallery2.jpg" alt=""><p>リビング（２）</p></li> 63 <li><img src="/img/modelhouse_pattern3_gallery5.jpg" alt=""><p>リビング（３）</p></li> 64 <li><img src="/img/modelhouse_pattern3_gallery6.jpg" alt=""><p>リビング（４）</p></li> 65 <li><img src="/img/modelhouse_pattern3_gallery7.jpg" alt=""><p>リビング（５）</p></li> 66 <li><img src="/img/modelhouse_pattern3_gallery3.jpg" alt=""><p>キッチン</p></li> 67 <li><img src="/img/modelhouse_pattern3_gallery11.jpg" alt=""><p>洗面所</p></li> 68 <li><img src="/img/modelhouse_pattern3_gallery9.jpg" alt=""><p>トイレ</p></li> 69 </ul> 70 </div> 71 </div> 72 </div> 73 </div> 74 </div> 75</div>
回答1件
0
自己解決
以下の記事を元に自己解決しました。
slick.jsがタブ切り替えやモーダルで不具合
タブ切り替えのコード内、コンテンツ表示とともに記事内コードを適用させました。
jQuery
1$('.pattern').eq(index).addClass('is-show'); 2$('.pattern').eq(index).find('.slide ul').slick('setPosition');
投稿2019/12/07 06:21
総合スコア27
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。