Auto Width

Splide will respect the width of each slide if the autoWidth option is true, which allows slides to have their own width.

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

Basically, you need to set width of each slide by CSS:

<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

As long as the content of each slide has explicit dimensions, such as an image with a width attribute, you don't have to do that.

Auto Height

In the same way, the autoHeight option is available for the vertical slider.

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