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

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

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

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

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

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

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

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

  • Sample Slide 01
  • Sample Slide 02
  • Sample Slide 03

画像のクロップ

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

object-fit

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

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

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

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

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

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

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

  • Sample Slide 01
  • Sample Slide 02
  • Sample Slide 03

cover

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

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

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

画像とテキスト

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

<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

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

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

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

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

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

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

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

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