Changing SVG Path

By default, Splide renders arrows by the following SVG:

You can replace the path by the arrowPath option. The SVG size must be 40×40:

new Splide( '.splide', {
arrowPath: 'm15.5 0.932-4.3 4.38...',
} ).mount();
JavaScript

Adding Classes

Splide generates the following HTML for arrows:

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

You can add your classes to the wrapper and button elements through the 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',
},
} );
JavaScript

Because Splide refers classes where splide__ is prefixed from CSS, you should add both default and your classes, not only yours.

Custom Arrows

Those 2 methods above may not be adequate if you want to use an icon font, an image or a text. By providing additional HTML, you can create your custom arrows:

<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>
HTML

Once Splide finds arrows in the HTML, it will use them instead of generating SVG elements. The arrows wrapper must be a child of the root or the slider element, otherwise Splide will fail to find it.