【コピペ用】slickオプション「矢印(arrows)の出し方」｜矢印でない？画像の上。位置の設定。

投稿日 1月 20, 2023
更新日 4月 6, 2024
著者しんぺー
カテゴリー Code
カテゴリー CSS
カテゴリー HTML
カテゴリー jQuery

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;
}