English

Structure

HTML構造

v3用のドキュメントを参照しています

基本構造

「基本的な使い方」でも触れましたが、スライダーを構成するための必要最低限のマークアップは、次の通りです。

<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

たいていの場合この構成で十分ですが、次のようなケースにおいては追加のHTMLが必要になることがあります。

  • 画像の高さを指定したいが、同時にテキストも挿入したい場合
  • 自動再生用のUIを追加し、かつ矢印をスライドに対して上下中央に配置したい場合

いくつかの問題は、追加のHTMLを記載することで解決できます。

スライドコンテナ

コンテナ要素の目的は、スライドの高さをスライド自身ではなく、スライド内に配置したコンテナに対して設定することにあります。こうすることで、スライド自体の高さは可変長になり、テキストなどのコンテンツにより動的に決定されることになります。特にcoverオプションを有効にする際に効力を発揮します。

コンテナを用いると、下の例のように、スライド内の一部分の高さを固定しつつ、スライド自体の高さは全体で最も高いスライドに合わせることができます。カード型のデザインなどでよく見るレイアウトですね。

  • 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.

コンテナ要素は、スライドの中に.splide__slide__containerクラスを持った<div>などのタグとして配置します。

<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はheight、heightRatio、あるいはfixedHeightを、スライドではなくコンテナに対して適用するようになります。

スライダー

スライダー要素の目的は、トラック要素（.splide__track）をposition: relativeプロパティを持った要素で囲うことにあります。矢印をスライダーに対して上下中央に配置する場合において、特に有用です。

<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

上のように.splide__sliderクラスを持った<div>でトラック要素を囲み、arrowsとpaginationオプションを'slider'に設定すると、矢印とページネーションは、ルートではなくスライダー要素内に挿入されるようになります。