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 がトグルボタンにあたります。