When autoWidth
option is true
, slide width is determined by its content or style. This allows each slide to have its own width. Also, autoHeight
option works similarly for a vertical slider.
Demos
Auto Width
Auto Height
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();
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:
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.
new Splide( '.splide', {
type : 'slide',
rewind : true,
height : '9rem',
trimSpace: false,
autoWidth: true,
} ).mount();