Splideスライダーの矢印を画像で置き換える

Splide.jsで作成したスライダーの矢印を任意の画像で置き換えたい時があると思います。
HTML、CSS、SVGのパスの三つ置き換える方法があるので、それぞれ丁寧に解説していきます。

通常のSplide.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Splide.jsを初めて使う方はこちらから先に参照いただければと思います。
Splide.jsでシンプルなスライダーを作成する

通常のSplideスライダーを作成する
HTMLで矢印を置き換える
CSSのみで矢印を置き換える
SVGのパスで矢印を置き換える

通常のSplideスライダーを作成する

わかりやすいように、最初に通常のSplideスライダーを作成して、そこから変更を加えていきます。

<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/css/splide.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/js/splide.min.js"></script>

<style>
    .sample-slider {
        width: 70%;
        margin: 0 auto;
    }
    .sample-slider img {
        width: 100%;
    }
</style>

<div class="splide sample-slider">
    <div class="splide__track">
          <ul class="splide__list">
              <li class="splide__slide"><img src="./img/sample1.png"></li>
              <li class="splide__slide"><img src="./img/sample2.png"></li>
              <li class="splide__slide"><img src="./img/sample3.png"></li>
          </ul>
    </div>
</div>

<script>
    new Splide('.sample-slider', {
        type : 'loop',
    }).mount()
</script>

通常のSplideスライダーができました。

HTMLで矢印を置き換える

Splide.jsでは矢印はなにもしなくても、SVGで矢印が表示されるのですが、以下のような構造でHTMLを追加する事により、imgタグで任意の画像を矢印として表示する事ができます。

<div class="splide sample-slider">
    <div class="splide__track">
          <ul class="splide__list">
              <li class="splide__slide"><img src="./img/sample1.png"></li>
              <li class="splide__slide"><img src="./img/sample2.png"></li>
              <li class="splide__slide"><img src="./img/sample3.png"></li>
          </ul>
    </div>
    <!------- ↓ 追加 ↓ -------->
    <div class="splide__arrows">
        <button class="splide__arrow splide__arrow--prev">
            <img src="./img/arrow_left.png">
        </button>
        <button class="splide__arrow splide__arrow--next">
            <img src="./img/arrow_right.png">
        </button>
    </div>
    <!------- ↑ 追加 ↑ -------->
</div>

CSSで元から入っている背景色を消して、サイズを調整しておきましょう。

.sample-slider .splide__arrow {
    background: none;
    width: 50px;
}

imgタグで追加した矢印が表示されました。

CSSのみで矢印を置き換える

先ほどはimgタグで画像を指定しましたが、HTMLを追加したくないという方もいると思います。
そういう場合はCSSのbackground-imageで置き換える画像を指定する事もできます。

.sample-slider .splide__arrow {
    background: none;
    background-size: cover;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
}
.sample-slider .splide__arrow--prev {
    background-image: url(./img/arrow_left.png);
}
.sample-slider .splide__arrow--next {
    background-image: url(./img/arrow_right.png);
}
.sample-slider .splide__arrow svg {
    display: none;
}

CSSのみで矢印を置き換える事ができました。

SVGのパスで矢印を置き換える

あまり使う機会はないかもしれませんが、Splide.jsではSVGのパスで矢印を置き換えることもできます。
以下のようにarrowPathオプションにパスを指定します。
1行で矢印を置き換えられるのでSVGのパスがわかっている場合は良いかもしれません。

new Splide('.sample-slider', {
    arrowPath: 'M40,20.2 L17.44,39.4 L17.44,27.88 L0,27.88 L0,12.52 L17.44,12.52 L17.44,1 L40,20.2 z M20.16,33.48 L35.84,20.2 L20.16,6.92 L20.16,15.24 L2.72,15.24 L2.72,25.16 L20.16,25.16 L20.16,33.48 z',
    type : 'loop',
}).mount()

SVGのパスについてはMozilla Foundationの以下のページでわかりやすく解説されています。
パス – SVG: スケーラブルベクターグラフィック | MDN

以上、Splideスライダーの矢印を画像で置き換える方法でした！