English

Arrows

矢印の調整

SVGパスの変更

Splideは、矢印を以下のようなSVGを用いて表示します。

このSVGパスはarrowPathオプションを通して変更できます。このとき、SVGのサイズは40×40としてください。

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

クラスの追加

Splideは、矢印を表示するために、次のようなHTMLを生成します。

<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

これらの要素に対してクラスを追加したい場合は、classesオプションを使用してください。

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

splide__接頭子を持ったクラスはSplide自体が参照しているため削除せず、上の例のように追加のクラスと一緒に設定してください。

挿入する位置の指定

Splideは、矢印をトラックの前に挿入しますが、プレースホルダ（<div class="splide__arrows"></div>）を使ってこの位置を指定できます。

<section class="splide" aria-label="プレースホルダの例">
  <!-- default location -->


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


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

もし矢印をトラックを基準として上下中央に揃えたい場合、relativeポジションを持った任意の要素の中にプレースホルダを配置することで実現できます。 これは、スライダーがトグルボタンなどほかのコントロールを持っている場合に効果を発揮します。

<section class="splide" aria-label="プレースホルダの例">
  <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>
    <!-- その他の要素 -->
  </div>
</section>
HTML

構成の制約が守られている限り、どの場所に挿入しても構いません。

矢印のカスタマイズ

上記2つの方法は、例えばアイコンフォントやテキストを矢印として使用する場合などにおいて、必ずしも十分ではありません。このようなときは、直接HTMLを与えることで独自の矢印（あるいは前後へ移動するためのUI）を作成できます。

<section class="splide" aria-label="カスタマイズされた矢印の例">
  <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

構成の制約が守られている限り、どの場所に挿入しても構いません。ただし、フォーカスやdisabled属性を正しく動作させるため、それぞれの矢印は<button>要素で作成してください。