Image Slider

画像スライダー

はじめに

このチュートリアルでは、一般的な画像スライダーを作成する方法について解説します。あわせて、テキストを一緒に表示したり、画像をcoverオプションを用いて切り抜く方法についても説明します。

画像スライダー

まず、スライダーに表示したい画像を各スライドに入れていきます。

<div id="image-slider" class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="image01.jpg">
</li>
<li class="splide__slide">
<img src="image02.jpg">
</li>
<li class="splide__slide">
<img src="image03.jpg">
</li>
</ul>
</div>
</div>
HTML

画像の幅をスライドの幅に一致させるため、下のようなCSSを追加してください。

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

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

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

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

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

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

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

画像のクロップ

スライダーに使用する画像のサイズは、必ずしも同じとは限りません。画像エディタなどを用いてサイズをそろえることもできますが、ここではcoverオプションを利用してみましょう。このオプションは、各画像のソースをその親要素のbackground-imageに変換します。

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

そうすると、上の例では不揃いだった画像を、次のように同じサイズで表示することができます。

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

このオプションを利用するには、heightheightRatiofixedHeightのいずれかのオプションを与える必要があります。そうしないとスライドの高さが0になってしまい、何も表示されません。

画像とテキスト

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

<div id="image-slider" 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-slider', {
perPage : 2,
breakpoints: {
640: {
perPage: 1,
},
},
} ).mount();
} );
JavaScript

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

  • Sample Slide 01
    Lorem ipsum dolor sit amet, ad laudem maluisset molestiae ius. Movet nostro in duo, audire vulputate mel cu
  • Sample Slide 02
    Nostrum mentitum ea sit. Ad est alia utroque verterem, ad pri soluta diceret expetenda
  • Sample Slide 03
    Quo harum altera incorrupte ea, eos viris constituto ex
  • Sample Slide 04
    Commodo denique honestatis duo et, an eum noluisse vituperatoribus, ad lorem nonumy tempor ius
  • Sample Slide 05
    Lorem ipsum dolor sit amet, ad laudem maluisset molestiae ius. Movet nostro in duo, audire vulputate mel cu
  • Sample Slide 06
    Nostrum mentitum ea sit. Ad est alia utroque verterem, ad pri soluta diceret expetenda

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

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

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

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