今回はjQueryプラグイン『Slick』の左右矢印を画像に変更する方法を解説します。
そもそもSlickってなんや？って方へ
スライドショーを簡単に作れるプラグインですので、ぜひ上記記事を参考に追加してみてください！
実際に矢印を画像に変更してみる
$(function() {
$('.slider-1').slick({
autoplay: false,
dots: true,
arrows:true,
infinite:true,
slidesToShow:1,
speed:500,
// 今回の該当コードはここ↓
prevArrow: '<img src="img/prev.png" class="slide-arrow prev-arrow">',
nextArrow: '<img src="img/next.png" class="slide-arrow next-arrow">',
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
});
});
こちらが実際のコードになります。
該当コード解説
prevArrow: '<img src="img/prev.png" class="slide-arrow prev-arrow">',
nextArrow: '<img src="img/next.png" class="slide-arrow next-arrow">',imgフォルダの中の画像をここで読み込むイメージです。画像は各自ご用意ください。
WordPressのオリジナルテーマで作っている場合は、おそらくですが絶対パスで配置しないといけないはず、、です。
またクラスを追加しておくことでCSSでスタイル調整しやすいようにしています。絶対配置でスライダーの左右に配置することが多いかと。
スライダーの左右上下中央に配置したい場合は以下記事も参考に矢印位置を調整してみてください。
まとめ
スライダー・スライドショーを簡単に作れる『Slick』プラグインのカスタマイズをこれからも発信していきますので、これからもちょくちょく除いてもらえると中の人も喜びますので、よろしくお願いします！
