Auto Width – Splide

When autoWidth option is true, slide width is determined by its content or style. This allows each slide to have its own width.

Basic Usage

At first, set width of slides manually 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>

Then initialize Splide with autoWidth option:

new Splide( '.splide', {
	type     : 'loop',
	autoWidth: true,
	focus    : 'center',
} ).mount();

The result will be like this:

Images

If each slide has an image content, you don’t have to set width manually.

window.addEventListener( 'load', function () {
	new Splide( '.splide', {
		autoWidth: true,
		rewind   : true,
	} ).mount();
} );

But there are some points you should aware of:

It’s better to wait for loading of all images before initialization because move distance can not be calculated without them(see the example code above).
"cover" or "lazyLoad" option doesn’t work well without width.

Of course these 2 options work well if you provide width manually.

Edge Spaces

When autoWidth is true and slider type is "slide", you’ll see a space on the end of a slider. Also, if focus is "center" or not 0, there will be a space on the start.

By changing the trimSpace option, you can control these spaces and slider behavior.

`trimSpace`	Behavior
`false`	Allow spaces.
`true`	Default. Remove spaces but sometimes the slider doesn’t move even when the active index is updated.
`'move'`	Remove spaces and the slider always move when the active index is updated. This mode is not compatible with pagination(indicator dots).

Try this demo to verify the difference.

trimSpace:

new Splide( '.splide', {
	type     : 'slide',
	rewind   : true,
	height   : '9rem',
	trimSpace: false,
	autoWidth: true,
} ).mount();