Auto Width

You're browsing the documentation for v3

Auto Width

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

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

<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>

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 slider.