There may be times when you want to replace the arrows of a Splide slider with custom images.
We will explain in detail three methods for replacing them using HTML, CSS, and SVG paths.
We will proceed on the assumption that you know how to create a regular slider in Splide.js, so if you are new to Splide.js, please refer here first.
[Splide] How to create a simple slider with Splide.js
Table of Contents
Create a regular Splide slider
For clarity, let’s start by creating a regular Splide slider and then proceed to make modifications from there.
<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>
Now we can see the regular Splide slider.
Replacing arrows using HTML
In Splide.js, by default, arrows are displayed in SVG without any additional configurations.
However, by adding HTML in the following structure, you can use the <img> tag to display custom images as arrows.
<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>
<!------- ↓ added ↓ -------->
<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>
<!------- ↑ added ↑ -------->
</div>
Let’s remove the default background color and adjust the size using CSS.
.sample-slider .splide__arrow {
background: none;
width: 50px;
}
The arrow specified with the <img> tag has been displayed.
Replacing arrows using CSS
In the previous section, we used the <img> tag to specify the arrow image, but but some people may prefer not to add extra HTML
In such cases, you can specify a arrow image using background-image property in CSS.
.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;
}
We were able to replace the arrows using only CSS.
Replacing arrows with SVG paths
You may not have many opportunities to use it, but in Splide.js, you can also replace the arrows with SVG paths.
Specify the SVG path in the arrowPath option as follows.
It might be useful if you know the SVG path because you can replace the arrow in just one line.
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()
About SVG paths is clearly explained on the following page by the Mozilla Foundation.
Paths – SVG: Scalable Vector Graphics | MDN
That is all, it was about how to replace the arrows of Splide.js with custom images.
