Structure – Splide

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:

You want to set height of slides, and also insert texts whose length is variable.
Add progress bar or play/pause button, but keep arrows vertically centered to slides, not a slider.

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.

Lorem ipsum dolor sit amet, ad laudem maluisset molestiae ius. Movet nostro in duo, audire vulputate mel cu.
Nostrum mentitum ea sit. Ad est alia utroque verterem, ad pri soluta diceret expetenda
Quo harum altera incorrupte ea, eos viris constituto ex
Commodo denique honestatis duo et, an eum noluisse vituperatoribus, ad lorem nonumy tempor ius
Ea ipsum habemus apeirian est, veri justo in vel, nobis insolens eum eu. Utinam scripta officiis te eum, sumo detracto consectetuer eum id
Lorem ipsum dolor sit amet, ad laudem maluisset molestiae ius. Movet nostro in duo, audire vulputate mel cu.
Nostrum mentitum ea sit. Ad est alia utroque verterem, ad pri soluta diceret expetenda
Quo harum altera incorrupte ea, eos viris constituto ex

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.