Auto Width

幅・高さの自動決定

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

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

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と同時に使用する場合は、スライドに明示的な幅を指定する必要があります。

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

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