slickの矢印を設置する面倒から開放されたい人
slickの矢印出すの面倒だなー。
なんかないの?
しんぺー
コピペ用の雛形を用意しました。
余計なスタイリングなどせずに、使い回しやすいようにしています。
・最低限のslickのオプションを準備
・矢印のicon画像は1枚でOK(設置、スタイリング済み)
・CSSで基本のスタイリング済み
使用する時の要点はこれから説明しますね。
完成形のイメージ
See the Pen slick arrows by shimpei (@shimpei) on CodePen.
使用する時の要点
使用時の要点を説明します。
slickのオプションでarrowsの画像の設定をしています。
arrowsの位置や大きさなどCSSでスタイリングしています。
HTML
HTMlはこんな感じです。一応。
<div class="slide-list">
<div class="slide-item">
<figure><img src="https://picsum.photos/800/300" alt=""></figure>
</div>
<div class="slide-item">
<figure><img src="https://picsum.photos/500/500" alt=""></figure>
</div>
<div class="slide-item">
<figure><img src="https://picsum.photos/1000/1000" alt=""></figure>
</div>
</div>
slick.jsのオプション
slickのオプションのところで矢印icon画像を設定しています。
画像のsrc
を変更すれば、あとはコピペでOKです。
オプションの全体像はこちらですが、要点は次に説明しますね。
<script>
$('.slide-list').slick({
autoplay: true,
autoplaySpeed: 3000,
speed: 1000,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
dots: false,
prevArrow: '<div class="slick-prev"><img src="ここに画像のパス_〇〇png" alt="prev"></div>',
nextArrow: '<div class="slick-next"><img src="ここに画像のパス_〇〇png" alt="next" style="transform: scale(-1, 1);"></div>',
});
</script>
オプションの要点
要点はこの部分ですが、変更する箇所は1箇所だけです。
矢印iconの画像のパスは適宜変更下さい。
左向き矢印の画像があれば、右矢印はCSSで反転させてます(赤文字部分)。
// 矢印のHTMLを挿入する(コピペでOK)
prevArrow: '<div class="slick-prev"><img src="ここに画像のパス_〇〇png" alt="prev"></div>',
nextArrow: '<div class="slick-next"><img src="ここに画像のパス_〇〇png" alt="next" style="transform: scale(-1, 1);"></div>',
CSS
スタイリングは最低限にしています。
使用する際に適宜変更ください。
.slick-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
cursor: pointer;
}
.slick-prev {
left: 0;
}
.slick-next {
right: 0px;
}
最後に
解説は以上になります。
普段使っている雛形を共有しました。
この記事で、あなたの問題が解決できていれば幸いです。
最後まで読んで頂きありがとうございます。