English

Arrows

矢印の調整

v3用のドキュメントを参照しています

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">
  <button class="splide__arrow splide__arrow--prev">
  </button>
  <button class="splide__arrow splide__arrow--next">
  </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自体が参照しているため削除せず、上の例のように追加のクラスと一緒に設定してください。

矢印のカスタマイズ

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

<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

HTML内に矢印の要素を検出すると、SplideはSVGでの自動生成をする代わりに、与えられた要素を使用するようになります。矢印の要素は、ルートか、あるいはスライダー要素内に配置する必要がありますので注意してください。