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.

If you are using autoWidth and lazyLoad together, make sure each slide has explicit width.

Auto Height

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

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