You can flexibly customize arrows by changing their SVG path, adding classes or writing your own HTML.

Changing SVG Path

Arrows are rendered by script in a SVG format:

Both previous and next arrows are created with a same SVG path, and one of them is flipped by CSS. As mentioned in the arrowPath section, the path can be replaced through options by passing a new path of a right arrow. Make sure that the SVG dimension is 40×40.

new Splide( '#splide', {
	'arrowPath': 'm15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z',
} ).mount();

Adding Classes

The structure of arrows HTML generated by the script is:

<div class="splide__arrows">
	<button class="splide__arrow splide__arrow--prev">
	</button>
	<button class="splide__arrow splide__arrow--next">
	</button>
</div>

You may want to add your own classes into a wrapper element or buttons. That can be realized by providing a classes option.

new Splide( '#splide', {
	classes: {
		arrows: 'splide__arrows your-class-arrows',
		arrow : 'splide__arrow your-class-arrow',
		prev  : 'splide__arrow--prev your-class-prev',
		next  : 'splide__arrow--next your-class-next',
	},
} ).mount();

Because class names where splide__ is prefixed are referred by CSS for styling, you should not add only your classes but also original ones. In case that those styles are not necessary, you can omit them. Be aware that the first class of each item must be unique.

Using HTML

Those two methods above are not adequate if you want to use an icon font, a PNG image or a text button. Writing additional HTML code can solve this problem.

<div class="splide">
	<div class="splide__arrows">
		<button class="splide__arrow splide__arrow--prev">
			Prev
		</button>
		<button class="splide__arrow splide__arrow--next">
			Next
		</button>
	</div>
	
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
	</div>
</div>

Splide will find arrow elements according to definition of class names mentioned above and will apply functionality to them. Be aware that the .splide__arrows element must be a child of a root or a .splide__slider element.

User's Guide
Tutorials
Extensions