【slick】矢印(arrows)を画像でカスタマイズする方法

2022-04-17 2024.12.29

1 基本設定
2 データURIの基本
3 CodePen ソースコードサンプル
4 HTML構造の設定
5 CSSのカスタマイズ
6 slickの初期化

slickのデフォルトではシンプルな矢印を使用しますが、これをカスタム画像に変更することで、サイトのデザインに一層の統一感とプロフェッショナルな印象を与えることができます。この記事では、データURIを活用してslickの矢印を画像で実装する方法を具体的な手順とコード例を交えて詳しく解説します。

基本設定

下記にてslickの基本を紹介していますのでご覧ください。

【slick】基本設定ガイド｜初心者向け導入方法とカスタマイズテクニック

Slick Carouselは、jQueryベースのスライダーライブラリで、シンプルな設定で美しいスライダーを作成することができます。レスポンシブ対応や多彩なオプションが特徴で、画…

データURIの基本

データURIは、データを直接URL内に埋め込む方法で、通常は画像やフォントなどのリソースを外部ファイルとして読み込む代わりに、インラインで使用します。具体的には下記の記事をご覧ください

Data URIを使ってSVGアイコンを軽量化する方法

ウェブデザインにおいて、アイコンはユーザーインターフェースの視覚的な魅力と機能性を高める重要な要素です。特に、SVG（Scalable Vector Graphics）は、その拡張…

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: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzAwIiB6b29tQW5kUGFuPSJtYWduaWZ5IiB2aWV3Qm94PSIwIDAgMjI0Ljg3OTk5IDIyNSIgaGVpZ2h0PSIzMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZlcnNpb249IjEuMCIgc3R5bGU9ImJhY2tncm91bmQ6bm9uZTsiPjxkZWZzPjxjbGlwUGF0aCBpZD0iZWJhN2YwNjBkNSI+PHBhdGggZD0iTSAwIDAuMDU4NTkzOCBMIDIyNC43NjE3MTkgMC4wNTg1OTM4IEwgMjI0Ljc2MTcxOSAyMjQuOTM3NSBMIDAgMjI0LjkzNzUgWiBNIDAgMC4wNTg1OTM4ICIgY2xpcC1ydWxlPSJub256ZXJvIi8+PC9jbGlwUGF0aD48Y2xpcFBhdGggaWQ9Ijk5OWE2NGYwNGYiPjxwYXRoIGQ9Ik0gMzcuOTE0MDYyIDggTCAxNTggOCBMIDE1OCAyMTcgTCAzNy45MTQwNjIgMjE3IFogTSAzNy45MTQwNjIgOCAiIGNsaXAtcnVsZT0ibm9uemVybyIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNlYmE3ZjA2MGQ1KSI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTSAwIDAuMDU4NTkzOCBMIDIyNC44Nzg5MDYgMC4wNTg1OTM4IEwgMjI0Ljg3ODkwNiAyMjQuOTQxNDA2IEwgMCAyMjQuOTQxNDA2IFogTSAwIDAuMDU4NTkzOCAiIGZpbGwtb3BhY2l0eT0iMSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZmlsbD0ibm9uZSIgZD0iTSAwIDAuMDU4NTkzOCBMIDIyNC44Nzg5MDYgMC4wNTg1OTM4IEwgMjI0Ljg3ODkwNiAyMjQuOTQxNDA2IEwgMCAyMjQuOTQxNDA2IFogTSAwIDAuMDU4NTkzOCAiIGZpbGwtb3BhY2l0eT0iMSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCM5OTlhNjRmMDRmKSI+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTSA0Mi4yOTY4NzUgMTAxLjkyMTg3NSBDIDM2LjQ2ODc1IDEwNy43NDIxODggMzYuNDY4NzUgMTE3LjE5MTQwNiA0Mi4yOTY4NzUgMTIzLjAxMTcxOSBMIDEzMS44MDA3ODEgMjEyLjM5ODQzOCBDIDEzNy42MjUgMjE4LjIxNDg0NCAxNDcuMDg5ODQ0IDIxOC4yMTQ4NDQgMTUyLjkxNzk2OSAyMTIuMzk4NDM4IEMgMTU4Ljc0MjE4OCAyMDYuNTc4MTI1IDE1OC43NDIxODggMTk3LjEyNSAxNTIuOTE3OTY5IDE5MS4zMDg1OTQgTCA3My45NDkyMTkgMTEyLjQ0NTMxMiBMIDE1Mi44NzEwOTQgMzMuNTc4MTI1IEMgMTU4LjY5NTMxMiAyNy43NjE3MTkgMTU4LjY5NTMxMiAxOC4zMDg1OTQgMTUyLjg3MTA5NCAxMi40ODgyODEgQyAxNDcuMDQyOTY5IDYuNjcxODc1IDEzNy41NzgxMjUgNi42NzE4NzUgMTMxLjc1MzkwNiAxMi40ODgyODEgTCA0Mi4yNSAxMDEuODc1IFogTSA0Mi4yOTY4NzUgMTAxLjkyMTg3NSAiIGZpbGwtb3BhY2l0eT0iMSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9nPjwvc3ZnPg==) no-repeat center center / 80%;
  position: absolute;
  top: 50%;
  translate: translateY(-50%);
  width: 40px;
  aspect-ratio: 1;
  z-index: 2;
}
.carousel__arrow--prev{
  left: 0;
}
.carousel__arrow--next{
  right: 0;
  rotate: 180deg;
}
@media (hover: hover){
  [class*="carousel__arrow--"]{
    transition: .3s;
  }
  [class*="carousel__arrow--"]:hover{
    cursor: pointer;
    opacity: 0.7;
  }
}

ポイント

カスタム矢印クラス: [class*="carousel__arrow--"]を使用して、.carousel__arrow--prevと.carousel__arrow--nextの両方をスタイリングします。
背景画像の設定: backgroundプロパティでデータURIを使用して矢印画像を設定します。ここではSVG画像をBase64エンコードしたデータURIを使用しています。
位置の調整:
position: absolute;とtop: 50%;、translate: translateY(-50%);で矢印を垂直方向に中央揃えします。
サイズの調整
width: 40px;とaspect-ratio: 1;で矢印のサイズを設定します。
方向の変更: .carousel__arrow--nextにrotate: 180deg;を適用して、右矢印を反転させています。
ホバー効果: マウスホバー時に矢印の不透明度を0.7に設定し、視覚的なフィードバックを提供します。

例としてデータURI化した元画像を添付します

arrow.svgをダウンロードする

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,
  });
});

ポイント: