slickのデフォルトではシンプルな矢印を使用しますが、これをFontAwesomeのアイコンにカスタマイズすることで、サイトのデザインに一層の統一感とプロフェッショナルな印象を与えることができます。この記事では、slickの矢印をFontAwesomeアイコンで実装する方法を具体的な手順とコード例を交えて詳しく解説します。
基本設定
下記にてslickの基本を紹介していますのでご覧ください。
Fontawesomeのライブラリ導入
アイコンライブラリであるFontAwesomeをCDNから読み込み、カスタムアイコンとして使用します。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">CodePen ソースコードサンプル
HTML構造の設定
<div class="carousel slick">
<div><img src="https://web-developer-note.com/codepen/images/slide01.jpg" alt="スライド1" width="600" height="400" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide02.jpg" alt="スライド2" width="600" height="400" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide03.jpg" alt="スライド3" width="600" height="400" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide04.jpg" alt="スライド4" width="600" height="400" class="imgauto"></div>
<div><img src="https://web-developer-note.com/codepen/images/slide05.jpg" alt="スライド5" width="600" height="400" class="imgauto"></div>
</div>CSSのカスタマイズ
[class*="carousel__arrow--"]{
background-color: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
aspect-ratio: 1;
z-index: 2;
}
.carousel__arrow--prev{
left: 0;
}
.carousel__arrow--next{
right: 0;
}
[class*="carousel__arrow--"]::before{
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: '';
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.carousel__arrow--prev::before{
content: '\f053';
}
.carousel__arrow--next::before{
content: '\f054';
}
@media (hover: hover){
[class*="carousel__arrow--"]{
transition: .3s;
}
[class*="carousel__arrow--"]:hover{
cursor: pointer;
opacity: 0.7;
}
}ポイント
z-index: 矢印がスライド画像の上に表示されるようにします。::after: カスタムFontAwesomeアイコンを矢印として設定します。contentプロパティにFontAwesomeのアイコンコードを指定します。- FontAwesomeには多くのアイコンが用意されており、スライダーの矢印として適したものを選択できます。一般的には、
左矢印:と\f053（fa-chevron-left）右矢印:アイコンが矢印としてよく使用されます。\f054（fa-chevron-right）
slickの初期化
HTMLとCSSの設定が完了したら、JavaScriptでslickスライダーを初期化し、矢印をカスタマイズします。
$(document).ready(function(){
$('.carousel').slick({
arrows: true,
prevArrow: '<span class="carousel__arrow--prev"></span>',
nextArrow: '<span class="carousel__arrow--next"></span>',
autoplay: true,
autoplaySpeed: 3000,
speed: 800,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
waitForAnimate: false,
});
});ポイント:
arrows: true: slickスライダーの矢印を有効にします。prevArrowとnextArrow: カスタムクラスを指定して、FontAwesomeアイコンを矢印として設定します。
