日本語

Arrows

You're browsing the documentation for v3

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.