• slick

slickスライダーの矢印を画像にし、上下中央揃えの位置にカスタマイズする方法。【簡単】

slick（スリック）スライダーの矢印をデフォルトのではなく、任意の画像に変更したい！

また、その矢印画像を上下中央揃えにし、左右それぞれの位置に配置したい。

矢印画像にしたが、片方表示されないので困ってる。。

このような疑問に回答します。

本記事ではslickスライダーの矢印を画像にし、上下中央揃えにするやり方を、コードペンのデモを交え、解説します。

slickスライダーを準備

See the Pen slickslider01 by Kohei (@kouk05) on CodePen.dark

まずはslickスライダーを準備しましょう。

上記はシンプルなslickスライダーのコードペンデモになります。

各種slickスライダーの実装方法については以下記事参照⬇️⬇️
https://kasumiblog.org/223-2/

slickスライダーの実行関数に矢印画像を入れるコードを追加

$('.slider').slick({
  arrows: true,
  prevArrow: '<img src="http://kasumiblog.xsrv.jp/codepen/images/arrow_lft.png" class="slide-arrow prev-arrow">',
  nextArrow: '<img src="http://kasumiblog.xsrv.jp/codepen/images/arrow_rig.png" class="slide-arrow next-arrow">',
});

slickスライダーの実行関数内にnextArrow、prevArrowを追加します。

文字列内にimgタグを入れ、任意の矢印画像のパスをsrc内に入れます。

以上でOK！

任意の画像が出力されているかと思います。

CSSで上下中央揃えになるよう装飾

.slick-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.prev-arrow {
  left: 0;
  z-index: 10;
}
.next-arrow {
  right: 0;
}

後は上記CSSをスライダー要素に当てればOK！

上下中央揃えで、且つ左右に矢印画像が分かれているかと思います。

矢印画像を押してみて、スライダーが機能しているか確認してみましょう。

矢印画像を入れたコードペンデモです⬇️⬇️
https://codepen.io/kouk05/pen/qBOeRed

左側の矢印画像だけ表示されない。。

.prev-arrow {
  left: 0;
  z-index: 10;
}

左側の矢印画像だけ表示されない場合はスライダー要素の下に隠れている可能性があります。

z-indexの数値を任意の数値に変更して、スライダー要素より前に配置されるよう調整しましょう。

以上で解説を終わります。