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