Splide.jsで作成したスライダーの矢印を任意の画像で置き換えたい時があると思います。
HTML、CSS、SVGのパスの三つ置き換える方法があるので、それぞれ丁寧に解説していきます。
通常のSplide.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Splide.jsを初めて使う方はこちらから先に参照いただければと思います。
Splide.jsでシンプルなスライダーを作成する
通常の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スライダーの矢印を画像で置き換える方法でした！
