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; }
最後に

解説は以上になります。
普段使っている雛形を共有しました。
この記事で、あなたの問題が解決できていれば幸いです。
最後まで読んで頂きありがとうございます。