読み込まれる前の画像を表示させない方法
slickを使うと、ページを読み込んだ際にスライダーになる前の画像が表示されてしまう。それを解消するには以下のcssを加える。
// slick
.slider {
visibility: hidden;
}
.slider.slick-initialized {
visibility: visible;
}
.slider は、親要素に自分がつけたcssの名前にする。.slick-initialized は、slick.jsの読み込み完了後、スライダーの準備ができた状態になるとスライダー要素に対して付与されるクラス名。
画面が横幅100%を超してしまう
画面いっぱいに画像を表示している場合、buttonの矢印がはみ出して横スクロールできるようになっているケースがある。その場合、.slick-next, .slick-prev の場所や位置を変える必要がある。
.slick-next, .slick-prev {
z-index: 1;
}
.slick-next {
right: 10px;
}
.slick-prev {
left: 10px;
}
もしくは矢印を非表示にする。cssでも良いが、jsで指定する