Structure

HTML構造

基本構造

Splideは、roottracklistおよびslideの4つの構成要素から成り立っています。

<section class="splide" aria-label="基本構造の例">
<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

マークアップの際、ルート要素には適切なラベルを記載してください。もしスライダーの説明として適切な、目に見える形で見出しが存在する場合は、aria-labelではなくaria-labelledbyを使用して両者を関連付けます。

<section class="splide" aria-labelledby="carousel-heading">
<h2 id="carousel-heading">基本構造の例</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

また、<section><ul>および<li>の代わりに、<div>で記載しても正しく動作します。

ルート要素のロール

ランドマークロール

多くの支援技術は、ページ内の主要な部分であるランドマークの間を、簡単に遷移できる機能を提供しています。ランドマークを定義することは、目に見えない「目次」をユーザに提供していると考えればわかりやすいかもしれません。<section>は、有効なラベルが提供されている場合に限って、regionランドマークとして機能しますので、スライダーのルート要素に対して<section>を用いることは、単に<div>を用いるよりも多くの場合において適切です。

<section>の使用に抵抗を感じるかもしれませんが、<div>を用いた場合、Splideは自動的にrole="region"を挿入しますので、いずれにしてもルート要素はregionランドマークとしてふるまいます。

グループロール

もしスライダーがそこまで重要ではない、あるいはメインのコンテンツとは直接関係がない場合は、role="group"を適用してください。

<div class="splide" role="group" aria-label="あまり重要ではないコンテンツ">
<div class="splide__track">...</div>
</div>
HTML

HTMLの制限

古いバージョンに比べて、バージョン4ではより柔軟にスライダーのHTMLを構成できるようになりました。次の2点が約束される限りは、基本的にどのような構成でも問題ありません。

track要素は、ルートの直下に配置する必要がなくなったため、例えば次のような例は正しく動作します。

<section class="splide" aria-label="HTMLの制限の例">
<div>
<div>
<div>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">...</li>
</ul>
</div>
</div>
</div>
</div>
</section>
HTML

ただし、次の例はtracklistが親子関係ではなくなっているため、動作しません。

<section class="splide" aria-label="無効なHTMLの例">
<div class="splide__track">
<div>
<ul class="splide__list">
<li class="splide__slide">...</li>
</ul>
</div>
</div>
</section>
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>などのタグとして配置します。

<section class="splide" aria-label="スライドコンテナの例">
<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はheightheightRatio、あるいはfixedHeightを、スライドではなくコンテナに対して適用するようになります。