読み込まれる前の画像を表示させない方法

slickを使うと、ページを読み込んだ際に
スライダーになる前の画像が表示されてしまう。
それを解消するには以下のcssを加える。

// slick
.slider {
    visibility: hidden;
}
.slider.slick-initialized {
    visibility: visible;
}

.slider は、親要素に自分がつけたcssの名前にする。
.slick-initialized は、slick.jsの読み込み完了後、スライダーの準備ができた状態になると
スライダー要素に対して付与されるクラス名。

画面が横幅１００％を超してしまう

画面いっぱいに画像を表示している場合、buttonの矢印がはみ出して
横スクロールできるようになっているケースがある。
その場合、.slick-next, .slick-prev の場所や位置を変える必要がある。

.slick-next, .slick-prev {
    z-index: 1;
}
.slick-next {
    right: 10px;
}
.slick-prev {
    left: 10px;
}

もしくは矢印を非表示にする。
cssでも良いが、jsで指定することもできる。

$(function(){
    $(".slider").slick({
        arrows: false,
    });
});