Splide Web制作 スライダー

【Splide】前へ次への矢印をカスタマイズする方法(画像変更も紹介)

※ 当サイトではアフィリエイト広告を利用しています

Splideの矢印ってカスタマイズ出来ない?

Splideは前後のスライドへの矢印を表示出来ますが、この矢印をデフォルトのデザインではなく、カスタマイズしたい時もあると思います。

今回はこの矢印をカスタマイズする方法を解説していきます。

Splideの基本的な使い方についてはこちらの記事を参照下さい。

あわせて読みたい
【2023年最新】Splideの使い方とよく使うオプション・カスタマイズ方法を解説
【2024年最新】Splideの使い方とよく使うオプション・カスタマイズ方法を解説

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

Splideの前へ次への矢印をカスタマイズする方法

まずは基本となるスライダーを見てみましょう。

See the Pen
Splide:基本形
by junpei (@junpei-sugiyama)
on CodePen.

上記はデフォルトの矢印になりますが、これをCSSで調整する方法と、画像を使う方法があります。

順番に解説していきますが、HTMLは共通で以下のようになります。

<div class="splide" aria-label="矢印カスタマイズ">
  <div class="splide__track">
    <div class="splide__list">
      <div class="splide__slide">
        <img src="画像パス1" alt="" />
      </div>
      <div class="splide__slide">
        <img src="画像パス2" alt="" />
      </div>
      <div class="splide__slide">
        <img src="画像パス3" alt="" />
      </div>
    </div>
  </div>
  <!-- 矢印を追加 -->
  <div class="splide__arrows">
    <button class="splide__arrow splide__arrow--prev button prev"></button>
    <button class="splide__arrow splide__arrow--next button next"></button>
  </div>
</div>

最後の『矢印を追加』の4行を書くとデフォルトの矢印が消えます。

ただし背景のグレーの丸は残るので、これはCSSで透明にします。

あとbuttonprevnextは自分で付けたclass名でOKです。

またJavaScriptに関しては最低限スライダーを機能させるコードだけにします。

new Splide(".splide").mount();

 

矢印を削除(非表示)する方法

カスタマイズする前に、非表示にする方法もご紹介します(今回のカスタマイズでは書きません)

デフォルトでは最初のデモのように表示されるので、以下のようにオプションを書けば非表示になります。

new Splide(".splide", {
  arrows: false, // 矢印ボタンを非表示
}).mount();

 

CSSでカスタマイズ

それでは本題の矢印のカスタマイズですが、CSSでカスタマイズする方法はこちらです。

/* 矢印のクリック範囲など */
.button {
  background-color: transparent; /* ボタンの背景を透明にする */
  height: 50px;
  transition: .2s;
  width: 30px;
}
/* 矢印共通のスタイル */
.button::before {
  background-color: #ff4500;
  content: "";
  height: 50px;
  width: 30px;
}
/* 前の矢印 */
.prev::before {
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
/* 次の矢印 */
.next::before {
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
/* 次のスライドが無い場合の矢印 */
.button:disabled::before {
  background-color: #ccc;
}
/* スライドのサイズ調整 */
.splide__slide img {
  height: auto;
  width: 100%;
}

今回矢印は三角形にしましたが、自由にカスタマイズ可能です。

三角形の作り方はこちらの記事を参照下さい。

あわせて読みたい
【サンプル付き】CSSで三角形を作る2つの方法(border、clip-path使用)
CSSで三角形を作る2つの方法(clip-path、border使用)

続きを見る

デモはこちらになります。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

ループにしていないので、最初のスライドの左と最後のスライドの右の矢印は色を変えて『次のスライドは無い』というのが分かるようにしています。

 

画像でカスタマイズ

次は画像でカスタマイズします。

/* 矢印のクリック範囲など */
.button {
  background-color: transparent; /* ボタンの背景を透明にする */
  height: 50px;
  transition: .2s;
  width: 50px;
}
/* 矢印共通のスタイル */
.button::before {
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  content: "";
  height: 50px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 50px;
}
/* 前の矢印 */
.prev::before {
  background-image: url(画像パス);
}
/* 次の矢印 */
.next::before {
  background-image: url(画像パス);
}
/* 次のスライドが無い場合の矢印 */
.button:disabled::before {
  opacity: .5;
}
/* スライドのサイズ調整 */
.splide__slide img {
  height: auto;
  width: 100%;
}

基本的な考えはCSSでカスタマイズと同じです。

デモはこちらになります。

See the Pen
Splide:矢印カスタマイズ(画像)
by junpei (@junpei-sugiyama)
on CodePen.

ちょっと透過率の調整が難しい画像ですね。。。

ここも自由に画像を変えてOKなので、ぜひ試してみて下さい。

まとめ

今回はSplideで前へ次への矢印をカスタマイズする方法を解説してきました。

CSSでカスタマイズする方法と画像を使う方法があるので、ご自身の環境に合わせて使ってみて下さい。

以上になります。

関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-Splide, Web制作, スライダー