slickでslidesToShowよりも枚数が少ないときに発生する挙動を無理やり抑える方法


完全と思われていたSlickも弱点あり。
想定したレイアウト通りの枚数が設定されない場合は崩れが発生するようです。

崩れ方はレイアウト次第だと思うけど、ユーザーの心理としては枚数が少ないときは必要枚数分Cloneされてほしいけどそれは起こらずに、枚数分存在するとしてアニメーションをすることで表示外にスライドが消えてしまいこともある。

いくつかサイトを調べると
・想定枚数より少ない場合はCloneを先にしてSlick発動
・想定枚数より少ない場合はSlickのOptionを上書きして~~

みたいなことが書いてあったが、
Cloneをしてしまうと現在のスライド/総スライド数 みたいなのが破綻するし
Optionを上書きするとそれはそれで期待しない動きをしてしまった

こちらとしてはアニメーションして動くな だったのでCSSで強制的にtransformをさせなければいいと気づく。

    if($('.js-gallery').children().length<4){
        $('.js-gallery').addClass("pos-fixed");
    }

こんな感じで想定枚数より好きない場合はClassを付与
そしてそのClassがあるときはs

    .slick-track {
        transform: translate3d(0,0,0) !important;
    }

こうすればいいっぽいね

,

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です