slick.js 最初の画像の幅が取得出来ない場合の対処法

Slickを使っている時、親要素がToggleなどのdisplay:noneや、cssでdisplay:flexだったりすると一枚目の画像の幅が取得できないようです。

最近、その場面に直面したので、その時の対処法。

HTML

<div class="menu">
<p class="toggle_btn"><img src="画像" alt=""/></p>
<div class="toggle_content">
<ul class="slider1">
<li>
<div class="slide">
<div class="box">
<div class="img"><img src="画像" alt=""></div>
<p class="txt">テキスト</p>
</div>
</div>
</li>
<li>
<div class="slide">
<div class="box">
<div class="img"><img src="画像" alt=""></div>
<p class="txt">テキスト</p>
</div>
</div>
</li>
<li>
<div class="slide">
<div class="box">
<div class="img"><img src="画像" alt=""></div>
<p class="txt">テキスト</p>
</div>
</div>
</li>
</ul>
</div>
</div>

JS

var width = $(window).width();
if (width <= 767) {
var sli1 = $('.slider1').not('.slick-initialized').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots: true,
autoplay: true,
lazyLoad: 'progressive'
});
} else {
$('.slider1.slick-initialized').slick('unslick');
}
$('.toggle_btn').click(function(){
sli1.slick('setPosition');
});

今回スマホの時のみ有効のトグルボタンを押すことでスライダーが入っている要素を表示、非表示するという内容だったのでボタンを押した時にスライダーの情報の再読込を行い、スライダーが表示されたタイミングで最初の画像の幅が取得できるようにしました。.toggle_btn がトグルボタンにあたります。

参考サイト
http://sssssn.com/archives/288

ホームページ制作の
お問い合わせ

Y desIgnのサービスは全国対応可!

全国
対応

遠方の企業様にLINEやzoomなどのビデオ会議ツールを活用させていただくことで日本全国のお客様へのサービス提供を可能としております。

ホームページを作りたいと
お伝えください

受付時間
平日火曜~金曜 10:00~17:00

0586-82-2196