Image Carousel

画像スライダー

はじめに

このチュートリアルでは、一般的な画像スライダーを作成する方法について解説します。あわせて、テキストを一緒に表示したり、画像の大きさをそろえる方法についても説明していきます。

画像スライダー

まず、基本構成に従ってHTMLをマークアップし、各スライドに画像を挿入してください。このとき、aria-label（またはaria-labelledby）によってスライダーの簡単な説明を加えると同時に、各画像にはalt属性を与え、その画像が何であるかをテキストで説明します。

<section id="image-carousel" class="splide" aria-label="お気に入りの写真">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
				<img src="image01.jpg" alt="">
			</li>
			<li class="splide__slide">
				<img src="image02.jpg" alt="">
			</li>
			<li class="splide__slide">
				<img src="image03.jpg" alt="">
			</li>
		</ul>
  </div>
</section>
HTML

<section id="image-carousel" class="splide" aria-label="お気に入りの写真">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
				<img src="image01.jpg" alt="">
			</li>
			<li class="splide__slide">
				<img src="image02.jpg" alt="">
			</li>
			<li class="splide__slide">
				<img src="image03.jpg" alt="">
			</li>
		</ul>
  </div>
</section>

たいていの場合、それぞれの画像はスライドの大きさに一致しませんので、以下のようなCSSを用いて幅を調整しておきましょう。

.splide__slide img {
  width: 100%;
  height: auto;
}
CSS

.splide__slide img {
  width: 100%;
  height: auto;
}

次に、DOMの要素がロードされた後で、Splideを初期化します。もし初期化を<head>タグ内で行うのであれば、次のようにDOMContentLoadedイベントを利用します。

<script>
  document.addEventListener( 'DOMContentLoaded', function () {
    new Splide( '#image-carousel' ).mount();
  } );
</script>
HTML

<script>
  document.addEventListener( 'DOMContentLoaded', function () {
    new Splide( '#image-carousel' ).mount();
  } );
</script>

また、<body>タグの終わり付近で初期化を行う場合は、このリスナは必要ありません。

<script>
  new Splide( '#image-carousel' ).mount();
</script>
HTML

<script>
  new Splide( '#image-carousel' ).mount();
</script>

結果、次のような画像スライダーを得ることができます。

画像のクロップ

スライダーに使用する画像のサイズは、必ずしも同じとは限りません。事前にsharpや画像編集ソフトなどを用いて修正しておくことが望ましいですが、クライアントサイドでの処理が必要になることもあります。

`object-fit`

IEはもうすぐ公式に寿命を迎えますので、もはやサポートの必要はないでしょう。モダンブラウザではobject-fitを用いて、画像が親要素に対してどのように配置されるべきかを指定できます。

まず、親要素となるスライドにheightRatioを用いて高さを与えてください。

document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#image-carousel', {
		cover      : true,
		heightRatio: 0.5,
  } ).mount();
} );
JavaScript

document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#image-carousel', {
		cover      : true,
		heightRatio: 0.5,
  } ).mount();
} );

このオプションを与えると、Splideは画像の高さを幅から自動計算するようになります。たとえば現在の幅が1000pxであれば、高さは500px（1000 * 0.5）と算出されます。

次に、object-fit: coverをスライドの中にある画像に適用してください。

.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
CSS

.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

そうすると次のように、画像の大きさが揃ったスライダーを得ることができます。

`cover`

もしまだIEのサポートが必要な場合は、coverオプションを用いて同様の結果を得ることができます。このオプションは、画像をスライドの背景画像に変換します。

document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#image-carousel', {
		cover      : true,
		heightRatio: 0.5,
  } ).mount();
} );
JavaScript

document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#image-carousel', {
		cover      : true,
		heightRatio: 0.5,
  } ).mount();
} );

このオプションを利用するには、height、heightRatioあるいはfixedHeightを用いて、スライドに明示的な高さを与える必要があります。

IEの終了が近いので、どこかのバージョンアップでこのオプションを削除する予定です。

画像とテキスト

各スライドにはどのようなコンテンツでも入れられますので、画像と一緒にテキストを表示するのは難しくありません。

<div id="image-carousel" class="splide">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
				<img src="image01.jpg">
				<div>
					Description 01
				</div>
			</li>

			<li class="splide__slide">
				<img src="image02.jpg">
				<div>
					Description 02
				</div>
			</li>
		</ul>
  </div>
</div>
HTML

<div id="image-carousel" class="splide">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
				<img src="image01.jpg">
				<div>
					Description 01
				</div>
			</li>


			<li class="splide__slide">
				<img src="image02.jpg">
				<div>
					Description 02
				</div>
			</li>
		</ul>
  </div>
</div>

ここではブレークポイントを利用して、デスクトップでは2枚のカードを、モバイルでは1枚のカードを表示するようにしてみます。

document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#card-carousel', {
		perPage    : 2,
		breakpoints: {
			640: {
				perPage: 1,
			},
		},
  } ).mount();
} );
JavaScript

document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#card-carousel', {
		perPage    : 2,
		breakpoints: {
			640: {
				perPage: 1,
			},
		},
  } ).mount();
} );

この結果、次のようなカードスライダーを得ることができます。

Lorem ipsum dolor sit amet, in duo falli epicurei. Te has saperet veritus efficiendi.
Suas integre probatus vel ex, veniam qualisque tincidunt ius id.
Alii blandit accusamus usu cu, omnis neglegentur nec ex.
Mei facilisi erroribus ocurreret ei. Te soluta assueverit pri, has no tempor ceteros reprehendunt.
Primis delenit theophrastus at sea, sed scripta vocibus adipiscing ea. Timeam denique lucilius vix te.
Nibh veri dolor in eam. At homero volumus eos, ea vix quas omnes temporibus.

もし先述のcoverオプションを併用したい場合は、コンテナ要素を追加する必要があります。くわしくはこのドキュメントを参照してください。

フルスクリーンスライダー

widthとheightオプションはCSSの相対単位も受け取りますので、それぞれ'100vw'、'100vh'とすれば、簡単にフルスクリーンのスライダーを作成できます。

document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#fullscreen-carousel', {
		width : '100vw',
		height: '100vh',
  } ).mount();
} );
JavaScript

document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#fullscreen-carousel', {
		width : '100vw',
		height: '100vh',
  } ).mount();
} );