Auto Width

幅・高さの自動決定

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

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

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

  • 225
  • 150
  • 180
  • 250
  • 200
  • 225
  • 150
  • 180
  • 250

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

<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

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

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

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

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

  • 120
  • 150
  • 100
  • 150
  • 80
  • 120
  • 150
  • 100
  • 150