Auto Width

幅・高さの自動決定

異なる幅を持ったスライド

autoWidthオプションを有効にすると、異なる幅を持ったスライドを1つのスライダー内に格納できます。

この場合、各スライドは明示的に幅を持っている必要があります。

<div class="splide">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide" style="width: 150px">Slide 01</li>
			<li class="splide__slide" style="width: 250px">Slide 02</li>
			<li class="splide__slide" style="width: 200px">Slide 03</li>
		</ul>
  </div>
</div>
HTML

<div class="splide">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide" style="width: 150px">Slide 01</li>
			<li class="splide__slide" style="width: 250px">Slide 02</li>
			<li class="splide__slide" style="width: 200px">Slide 03</li>
		</ul>
  </div>
</div>

スライドの中に明確なサイズを持った要素（たとえばwidthを持った画像）が配置されている場合はこの限りではありません。

lazyLoadと同時に使用する場合は、スライドに明示的な幅を指定する必要があります。

最終ページの矢印とページネーション

autoWidthオプションをループしないスライダーで使用すると、「次へ」の矢印を押してもアクティブスライドだけが変化し、スライダーそのものは移動しない場合が出てきます。ページネーションについても同様のことが言えます。

試しに、下のサンプルスライダーで「次へ」の矢印を押し、最後のスライドまで移動してみてください。

バージョン4.1からは、focusとomitEndオプションを指定することで、スライダーが移動できない位置まで到達した際は矢印を無効化し、不必要なページネーションを省略できます。

new Splide( '.splide', {
  autoWidth: true,
  focus    : 0,
  omitEnd  : true,
} );
JavaScript

new Splide( '.splide', {
  autoWidth: true,
  focus    : 0,
  omitEnd  : true,
} );

結果、例えば以下のようなスライダーを得ることができます。

異なる高さを持ったスライド

autoHeightオプションを有効にすると、異なる高さを持ったスライドを1つのスライダー内に配置できます。