Splide accepts several variations of HTML structure to correspond with some specific cases.
Fundamental Structure
As already mentioned before, the basic structure is:
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 01</li>
<li class="splide__slide">Slide 02</li>
<li class="splide__slide">Slide 03</li>
</ul>
</div>
</div>
In most cases, this structure works well. But you will face a problem in following circumstances:
Some problems can be solved by adding an extra element.
Slide Container
The purpose of a container element is to set height to a part of a slide and keep a slide height adaptive to its inner content. It is especially useful when you want to use "cover"
mode and simultaneously add headings or descriptions inside slides.
In the example below, the height of images is 9rem
but the one of slides is adjusted to the max height of contents among all slides.
new Splide( '#splide', {
type : 'loop',
perPage : 2,
height : '9rem',
cover : true,
breakpoins: {
640: {
height: '6rem',
}
}
} );
To realize that, wrap images by <div>
element having a .splide__slide__container
class like this:
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="splide__slide__container">
<img src="...">
</div>
Lorem Ipsum Dolor Sit Amet
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="...">
</div>
Lorem Ipsum Dolor Sit Amet
</li>
</ul>
</div>
</div>
Once Splide has found a container inside a slide, it applies height
, heightRatio
or fixedHeight
to the container instead of the slide itself.
Slider
The purpose of a slider element is to wrap a track by "relative"
element.
In the example above, a progress bar and play/pause buttons are inserted in the root element. You see arrows are vertically centered to the slider because only the root element has position:relative
style.
But you might wonder how they are made centered to slides, not the slider. That’s where a slider element comes in:
<div class="splide">
<div class="splide__slider"> <!-- relative -->
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 01</li>
<li class="splide__slide">Slide 02</li>
<li class="splide__slide">Slide 03</li>
</ul>
</div>
</div>
<div>
<!-- extra contents -->
</div>
</div>
Wrap a track element by .splide__slider
and set arrows option to 'slider'
for arrows to be appended inside it. Of course you can also write your custom HTML of arrows there.
In the same way, pagination can be inserted in the slider element by passing 'slider'
to the pagination
option.