Image Slider

画像スライダー

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

はじめに

このチュートリアルでは、一般的な画像スライダーを作成する方法について解説します。あわせて、テキストを一緒に表示したり、画像を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

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

画像の幅をスライドの幅に一致させるため、下のような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-slider' ).mount();
  } );
</script>
HTML

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

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

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

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

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

画像のクロップ

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

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

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

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

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

IEをサポートする必要がない場合は、coverオプションの代わりにCSSのobject-fitプロパティを利用できます。

画像とテキスト

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

<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

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

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

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

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

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

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

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

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

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

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

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