[slick.js]サムネイルのスライド数がレスポンシブ時に減る場合の対処法

減るんですよ。

どういうことか
こうする

どういうことか

こういうのを作ったとする。

<div class="slider">
    <div class="slide">***</div>
    <div class="slide">***</div>
    <div class="slide">***</div>
    <div class="slide">***</div>
    <div class="slide">***</div>
</div>
<div class="slider_thumb">
    <div class="slide">***</div>
    <div class="slide">***</div>
    <div class="slide">***</div>
    <div class="slide">***</div>
    <div class="slide">***</div>
</div>

メインのスライドは1枚だけ表示、サムネ用はメニュー用途だから全部出るようにする。

$(function(){
    $('.slider').slick({
        autoplay: true,
        autoplaySpeed: 6000,
        speed: 1000,
        infinite: true,
        asNavFor: ".slider_thumb",
    });
    $('.slider_thumb').slick({
        dots: false,
        arrows: false,
        infinite: true,
        slidesToShow: 5,
        asNavFor: ".slider",
        focusOnSelect: true,
    });
})

そうして作ったこれを操作する。

サムネイル用のスライドの2番目を押したら2番目が、3番目を押したら3番目が、当然アクティブになる。メインのスライドも連動する。

そうやって動かした状態でブラウザ幅を狭めたら、サムネ用のアクティブになってるものの手前のスライドが消える。言い換えると、.slick-trackの位置がズレる。それでもって、スライドが動かなくなる。

flexとかgrid周りの干渉のアレかと思ったけど関係なかった。

どうすりゃええのよって話。

こうする

transformが諸悪の根源なので、無効化する。

.slider_thumb .slick-track{
    transform: unset !important;
}

サムネはそもそもスライドとして成立してない使い方なんで、見た目のために動作を破壊しても問題ないという話。

おしまい。