©2022- web-developer-note.com

【slick】独立したHTMLをスライダーの矢印(arrows)として機能させる方法

【slick】独立したHTMLをスライダーの矢印(arrows)として機能させる方法

slickのデフォルトでは矢印がスライダー内に配置されますが、これを外部に独立したHTMLボタンとして実装することで、より自由なデザインや配置が可能になります。この記事では、独立したHTMLボタンをslickスライダーの矢印として機能させる方法を具体的な手順とコード例を交えて詳しく解説します。

基本設定

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

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

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

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

データURIの基本

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

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

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

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

独立したHTML矢印のメリット

独立したHTMLボタンを使用してslickスライダーの矢印を実装する主なメリットは以下の通りです：

  • 自由な配置: 矢印をスライダーの外部に配置することで、ページのレイアウトやデザインに合わせた柔軟な配置が可能です。
  • デザインの統一: サイト全体のデザインに合わせて矢印ボタンをカスタマイズでき、統一感のあるインターフェースを実現します。
  • アクセシビリティの向上: カスタムボタンに適切なARIA属性を追加することで、スクリーンリーダーなどの支援技術への対応を強化できます。
  • 機能の拡張: カスタムボタンに追加の機能やアニメーションを組み込むことが容易になります。

CodePen ソースコードサンプル

HTML構造の設定

slickスライダーを実装するための基本的な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>

<div class="carousel__arrows">
  <button type="button" class="carousel__arrow--prev" aria-label="前へ"></button>
  <button type="button" class="carousel__arrow--next" aria-label="次へ"></button>
</div>

ポイント

  • 矢印ボタンの配置: 矢印ボタンをスライダー外に配置することで、HTML構造を明確に保ちつつ、カスタムスタイリングが可能になります。
  • ARIA属性の追加: 矢印ボタンにaria-labelを追加することで、スクリーンリーダーなどの支援技術に対してボタンの目的を明示しています。

CSSのカスタマイズ

slickスライダーの矢印を独立したHTMLボタンとしてスタイリングします。ここでは、データURIを使用して矢印画像を背景に設定し、ボタンのデザインをカスタマイズします。

.carousel__arrows{
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px auto;
}

/* カスタム矢印ボタンのスタイル */
[class*="carousel__arrow--"]{
  -webkit-appearance: none;
  border-radius: 0;
  border: 1px solid #000000;
  background: #ffffff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzAwIiB6b29tQW5kUGFuPSJtYWduaWZ5IiB2aWV3Qm94PSIwIDAgMjI0Ljg3OTk5IDIyNSIgaGVpZ2h0PSIzMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZlcnNpb249IjEuMCIgc3R5bGU9ImJhY2tncm91bmQ6bm9uZTsiPjxkZWZzPjxjbGlwUGF0aCBpZD0iZWJhN2YwNjBkNSI+PHBhdGggZD0iTSAwIDAuMDU4NTkzOCBMIDIyNC43NjE3MTkgMC4wNTg1OTM4IEwgMjI0Ljc2MTcxOSAyMjQuOTM3NSBMIDAgMjI0LjkzNzUgWiBNIDAgMC4wNTg1OTM4ICIgY2xpcC1ydWxlPSJub256ZXJvIi8+PC9jbGlwUGF0aD48Y2xpcFBhdGggaWQ9Ijk5OWE2NGYwNGYiPjxwYXRoIGQ9Ik0gMzcuOTE0MDYyIDggTCAxNTggOCBMIDE1OCAyMTcgTCAzNy45MTQwNjIgMjE3IFogTSAzNy45MTQwNjIgOCAiIGNsaXAtcnVsZT0ibm9uemVybyIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNlYmE3ZjA2MGQ1KSI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTSAwIDAuMDU4NTkzOCBMIDIyNC44Nzg5MDYgMC4wNTg1OTM4IEwgMjI0Ljg3ODkwNiAyMjQuOTQxNDA2IEwgMCAyMjQuOTQxNDA2IFogTSAwIDAuMDU4NTkzOCAiIGZpbGwtb3BhY2l0eT0iMSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZmlsbD0ibm9uZSIgZD0iTSAwIDAuMDU4NTkzOCBMIDIyNC44Nzg5MDYgMC4wNTg1OTM4IEwgMjI0Ljg3ODkwNiAyMjQuOTQxNDA2IEwgMCAyMjQuOTQxNDA2IFogTSAwIDAuMDU4NTkzOCAiIGZpbGwtb3BhY2l0eT0iMSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCM5OTlhNjRmMDRmKSI+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTSA0Mi4yOTY4NzUgMTAxLjkyMTg3NSBDIDM2LjQ2ODc1IDEwNy43NDIxODggMzYuNDY4NzUgMTE3LjE5MTQwNiA0Mi4yOTY4NzUgMTIzLjAxMTcxOSBMIDEzMS44MDA3ODEgMjEyLjM5ODQzOCBDIDEzNy42MjUgMjE4LjIxNDg0NCAxNDcuMDg5ODQ0IDIxOC4yMTQ4NDQgMTUyLjkxNzk2OSAyMTIuMzk4NDM4IEMgMTU4Ljc0MjE4OCAyMDYuNTc4MTI1IDE1OC43NDIxODggMTk3LjEyNSAxNTIuOTE3OTY5IDE5MS4zMDg1OTQgTCA3My45NDkyMTkgMTEyLjQ0NTMxMiBMIDE1Mi44NzEwOTQgMzMuNTc4MTI1IEMgMTU4LjY5NTMxMiAyNy43NjE3MTkgMTU4LjY5NTMxMiAxOC4zMDg1OTQgMTUyLjg3MTA5NCAxMi40ODgyODEgQyAxNDcuMDQyOTY5IDYuNjcxODc1IDEzNy41NzgxMjUgNi42NzE4NzUgMTMxLjc1MzkwNiAxMi40ODgyODEgTCA0Mi4yNSAxMDEuODc1IFogTSA0Mi4yOTY4NzUgMTAxLjkyMTg3NSAiIGZpbGwtb3BhY2l0eT0iMSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9nPjwvc3ZnPg==) no-repeat center center / 50%;
  width: 40px;
  aspect-ratio: 1;
  z-index: 2;
  transition: .1s;
}

/* 矢印が無効な状態のスタイル */
[class*="carousel__arrow--"].is-disable{
  pointer-events: none;
  background-color: #cbcbcb;
}

/* 矢印ボタンの位置調整 */
.carousel__arrow--prev{
  position: absolute;
  left: 0;
}

.carousel__arrow--next{
  position: absolute;
  right: 0;
  transform: rotate(180deg);
}

/* ホバー時のエフェクト */
@media (hover: hover){
  [class*="carousel__arrow--"]:hover{
    cursor: pointer;
    opacity: 0.7;
  }
}

ポイント

  • カスタム矢印クラス: [class*="carousel__arrow--"]を使用して、.carousel__arrow--prevと.carousel__arrow--nextの両方をスタイリングします。
  • 背景画像の設定: backgroundプロパティでデータURIを使用して矢印画像を設定します。ここではSVG画像をBase64エンコードしたデータURIを使用しています。
  • .is-disable:矢印が無効な状態（スライドの最初または最後）でのスタイルを設定しています。ボタンをクリック不可にし、背景色をグレーに変更しています。
  • .carousel__arrow--prevと.carousel__arrow--next: 矢印ボタンの位置を調整しています。.carousel__arrow--nextにはtransform: rotate(180deg);を適用して、右矢印を反転させています。
  • ホバー効果: マウスホバー時に矢印の不透明度を0.7に設定し、視覚的なフィードバックを提供します。

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

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

slickの初期化とカスタム矢印の連携

HTMLとCSSの設定が完了したら、JavaScriptでslickスライダーを初期化し、カスタム矢印ボタンをslickのナビゲーションとして機能させます。

$(document).ready(function(){
  const carousel_selector = '.carousel';
  const prev_arrow_selector = '.carousel__arrow--prev';
  const next_arrow_selector = '.carousel__arrow--next';
  const disabled_class = 'is-disable';

  // slickの初期化
  $(carousel_selector).slick({
    arrows: true,
    prevArrow: $(prev_arrow_selector),
    nextArrow: $(next_arrow_selector),
    dots: true,
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1,
  });

  // 矢印の状態を更新する関数
  function update_arrow_state(slick, currentSlide) {
    if (currentSlide === 0) {
      $(prev_arrow_selector).addClass(disabled_class);
    } else {
      $(prev_arrow_selector).removeClass(disabled_class);
    }

    if (currentSlide >= slick.slideCount - slick.options.slidesToShow) {
      $(next_arrow_selector).addClass(disabled_class);
    } else {
      $(next_arrow_selector).removeClass(disabled_class);
    }
  }

  // 初期状態の矢印を更新
  const slick_instance = $(carousel_selector).slick('getSlick');
  update_arrow_state(slick_instance, slick_instance.currentSlide);

  // スライド変更後に矢印の状態を更新
  $(carousel_selector).on('afterChange', function (event, slick, currentSlide) {
    update_arrow_state(slick, currentSlide);
  });
});

jsの解説

ユーザーがスライダーを操作する際に、矢印ボタンの有効・無効状態を適切に管理することは、ユーザー体験を向上させるために重要です。以下に、その実装方法を詳しく説明します。

セレクタの定義

あらかじめセレクタを定義しておくことにより、jsの使いまわしやカラス名の管理が簡単になります。

const carousel_selector = '.carousel';
const prev_arrow_selector = '.carousel__arrow--prev';
const next_arrow_selector = '.carousel__arrow--next';
const disabled_class = 'is-disable';

初期状態の設定

スライダーが初期化されたときに、現在のスライド位置に応じて矢印ボタンの状態を設定します。最初のスライドでは「前へ」ボタンを無効化し、最後のスライドでは「次へ」ボタンを無効化します。

const slick_instance = $(carousel_selector).slick('getSlick');
update_arrow_state(slick_instance, slick_instance.currentSlide);

スライド変更時の更新

スライドが変更されるたびに、現在のスライド位置に基づいて矢印ボタンの状態を更新します。

$(carousel_selector).on('afterChange', function (event, slick, currentSlide) {
  update_arrow_state(slick, currentSlide);
});

update_arrow_state関数

この関数は、現在のスライド位置に応じて矢印ボタンにis-disableクラスを追加または削除します。is-disableクラスは、CSSで矢印ボタンを無効化するスタイルを適用します。

function update_arrow_state(slick, currentSlide) {
  if (currentSlide === 0) {
    $(prev_arrow_selector).addClass(disabled_class);
  } else {
    $(prev_arrow_selector).removeClass(disabled_class);
  }

  if (currentSlide >= slick.slideCount - slick.options.slidesToShow) {
    $(next_arrow_selector).addClass(disabled_class);
  } else {
    $(next_arrow_selector).removeClass(disabled_class);
  }
}

ポイント:

  • 最初のスライド: 現在のスライドが最初（currentSlide === 0）の場合、「前へ」ボタンにis-disableクラスを追加して無効化します。
  • 最後のスライド: 現在のスライドが最後（currentSlide >= slick.slideCount - slick.options.slidesToShow）の場合、「次へ」ボタンにis-disableクラスを追加して無効化します。
  • それ以外のスライド: is-disableクラスを削除してボタンを有効化します。

まとめ

独立したHTMLボタンをslickスライダーの矢印として実装することで、ウェブサイトのデザインに一層の統一感とプロフェッショナルな印象を与えることができます。独立したHTMLボタンを活用することで、矢印の配置やデザインを自由にカスタマイズし、ユーザー体験を向上させることが可能です。以下のポイントを押さえて、効果的なカスタムナビゲーションを実装しましょう。

  • ARIA属性の適用: アクセシビリティを向上させるために、適切なARIA属性を追加。
  • レスポンシブデザインの対応: デバイスや画面サイズに応じて矢印ボタンのスタイルを調整。
  • パフォーマンスの最適化: データURIを使用する際は、画像のサイズを最適化し、必要最小限のデータを使用。
  • コードの可読性とメンテナンス性: コメントや変数を活用して、コードの可読性とメンテナンス性を向上。
  • スタイリングの一貫性: サイト全体のデザインと矢印ボタンのスタイルを統一。

これらのテクニックを活用して、より軽量で高速なウェブサイトを構築し、ユーザーに優れた体験を提供しましょう。slickスライダーと独立したHTML矢印ボタンを組み合わせて、サイトのデザインとユーザー体験をさらに向上させてください。

この記事をシェアする
JavaScriptの一覧を見る

どなたでもコメントや質問をどうぞ

スパム対策のため、承認作業を行うまでは表示されません。ご了承ください。

CAPTCHA


関連記事