Auto Width

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.

Navigations in The Last Page

If you are using autoWidth for a slide type carousel, the next arrow can just change the active slide in the last page without moving the carousel. The same thing can be said about the last few dots of pagination.

Try pressing the next arrow in the following example, and you'll see how the last page behave:

From the version 4.1, you can disable the arrow when the carousel reaches the last page and omit redundant pagination dots by using focus and omitEnd options:

new Splide( '.splide', {
  autoWidth: true,
  focus    : 0,
  omitEnd  : true,
} );
JavaScript

new Splide( '.splide', {
  autoWidth: true,
  focus    : 0,
  omitEnd  : true,
} );

As a result, you'll get a carousel like the following example:

Auto Height

Splide also supports autoHeight for the vertical carousel.