Basic Structure

Splide requires 4 components — root, track, list and slide:

<section class="splide" aria-label="Basic Structure Example">
<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>
</section>
HTML

Make sure to provide a concise label to the root element. Alternatively, if your carousel has a visible heading, use aria-labelledby that indicates the ID:

<section class="splide" aria-labelledby="carousel-heading">
<h2 id="carousel-heading">Basic Structure Example</h2>
<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>
</section>
HTML

You can use <div> in lieu of <section>, <ul> and <li>.

Role

Landmark Role

Many assistive technologies have a means to navigate between landmarks which are important document areas — such as banner and navigation. You can provide invisible but very useful "table of contents" for users by defining a landmark. And therefore, using <section> with an accessible name makes more sense than <div> because it has an implicit region landmark role.

I guess you may be thinking "ewww section?😑" ...okay, if you use <div> instead of <section>, Splide will assign role="region" to make it a landmark, which leads the same result.

Group Role

If your carousel is not so significant or not directly related to your main contents, assign role="group" to the root instead.

<div class="splide" role="group" aria-label="Unimportant Content">
<div class="splide__track">...</div>
</div>
HTML

Restriction

The HTML structure of v4 becomes more flexible than old versions'. You have to keep only two things:

The track element does not have to be a child of the root element, which means the following example is also valid:

<section class="splide" aria-label="Restriction Example">
<div>
<div>
<div>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">...</li>
</ul>
</div>
</div>
</div>
</div>
</section>
HTML

But the next example is invalid since the relation becomes track > div > list > slide:

<section class="splide" aria-label="Incorrect Structure Example">
<div class="splide__track">
<div>
<ul class="splide__list">
<li class="splide__slide">...</li>
</ul>
</div>
</div>
</section>
HTML

Be careful not to break core components by styles of wrapper elements.

Slide Container

The purpose of the container element is to set height on a part of a slide and keep slide height adaptive to the inner content. This is especially useful when you want to use cover mode and add headings or descriptions in your slides.

In the example below, the height of images is 9rem, but the height of slides is the max height of the content among all slides.

  • 06
    Nibh veri dolor in eam. At homero volumus eos, ea vix quas omnes temporibus.
  • 07
    Feugiat quaerendum ad eam, at hinc graeci rationibus pri. Ei viris labitur consectetuer mei.
  • 08
    Suas inani rationibus duo ne, sit no epicurei dissentiet reprehendunt. Ea sed primis recteque consulatu.
  • 09
    Duis constituto eam ex, sit rebum nonumes eu. Ut sea summo consul necessitatibus.
  • 01
    Lorem ipsum dolor sit amet, in duo falli epicurei. Te has saperet veritus efficiendi.
  • 02
    Suas integre probatus vel ex, veniam qualisque tincidunt ius id.
  • 03
    Alii blandit accusamus usu cu, omnis neglegentur nec ex.
  • 04
    Mei facilisi erroribus ocurreret ei. Te soluta assueverit pri, has no tempor ceteros reprehendunt.
  • 05
    Primis delenit theophrastus at sea, sed scripta vocibus adipiscing ea. Timeam denique lucilius vix te.
  • 06
    Nibh veri dolor in eam. At homero volumus eos, ea vix quas omnes temporibus.
  • 07
    Feugiat quaerendum ad eam, at hinc graeci rationibus pri. Ei viris labitur consectetuer mei.
  • 08
    Suas inani rationibus duo ne, sit no epicurei dissentiet reprehendunt. Ea sed primis recteque consulatu.
  • 09
    Duis constituto eam ex, sit rebum nonumes eu. Ut sea summo consul necessitatibus.
  • 01
    Lorem ipsum dolor sit amet, in duo falli epicurei. Te has saperet veritus efficiendi.
  • 02
    Suas integre probatus vel ex, veniam qualisque tincidunt ius id.
  • 03
    Alii blandit accusamus usu cu, omnis neglegentur nec ex.
  • 04
    Mei facilisi erroribus ocurreret ei. Te soluta assueverit pri, has no tempor ceteros reprehendunt.

To realize that, wrap images by <div> element that has the .splide__slide__container class:

<section class="splide" aria-label="Slide Container Example">
<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>
</section>
HTML

Splide applies height, heightRatio or fixedHeight to containers instead of slides.