日本語

Arrows

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 splide__arrows--ltr">
  <button
    class="splide__arrow splide__arrow--prev"
    type="button"
    aria-label="Previous slide"
    aria-controls="splide01-track"
  >
    <svg>...</svg>
  </button>
  <button
    class="splide__arrow splide__arrow--next"
    type="button"
    aria-label="Next slide"
    aria-controls="splide01-track"
  >
    <svg>...</svg>
  </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.

Placeholder

By default, Splide inserts arrows before a track element. You are able to specify the position by adding a placeholder as <div class="splide__arrows"></div>:

<section class="splide" aria-label="Placeholder Example">
  <!-- default location -->


  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">...</li>
		</ul>
  </div>


  <div class="splide__arrows"></div>
</section>
HTML

If you want to vertically center arrows in the carousel, place it inside your arbitrary relative element. This technique is useful for a carousel with some other controls.

<section class="splide" aria-label="Placeholder Example">
  <div style="position: relative">
    <div class="splide__arrows"></div>


    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">...</li>
      </ul>
    </div>
  </div>


  <div>
    <!-- Some other controls -->
  </div>
</section>
HTML

But do not insert the placeholder in the track element (structure restriction).

Custom Arrows

If you want to use an icon font, an image or a text, you can create your custom arrows with additional markup:

<section class="splide" aria-label="Custom Arrows Example">
  <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>
</section>
HTML

You can put the splide__arrows anywhere unless you break restriction of the HTML structure. Note that each arrow must be <button> to receive focus and a disabled attribute.