日本語

Structure

You're browsing the documentation for v3

Basic Structure

As already mentioned before, this is the basic HTML structure that Splide requires:

<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>
HTML

This structure is enough for most sliders, but you will face a problem in these cases:

  • You want to set height of images, and also insert texts like a card design.
  • Add progress bar or play/pause button, but keep arrows vertically centered to a slide, not a slider.

You can solve these problems by adding extra HTML.

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:

<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>
HTML

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

Slider

The purpose of the slider element is to wrap the track by the relative element. This is useful if you want to vertically center arrows to the track element instead of the root.

<div class="splide">
  <div class="splide__slider">
    <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>
HTML

Wrap the track by <div> with .splide__slider, and set the arrows and/or pagination option to 'slider'. As a result, Splide will insert arrows and/or pagination into the slider element.