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の数値を任意の数値に変更して、スライダー要素より前に配置されるよう調整しましょう。

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

Ads

関連記事

JavaScript プログラミング

【簡単】JavaScriptを使ってhtmlタグを取得し、値を出力・書き換える方法

2022.03.30
80
WordPress プログラミング

Yoast SEOのschema(スキーマ)設定を無効化する方法

2022.04.03
64
HTMLCSS JavaScript プログラミング

【簡単CSS・jQuery】上スクロール時のみヘッダー・ナビを固定表示する方法

2022.04.12
26
PHP プログラミング

【簡単PHP】連想配列からkey(キー)のみ取得、もしくは値のみ配列で再取得する方法

2022.03.22
104