このページの目的
複数の画像やカードを、左右の矢印や下のドットで切り替えながら表示する「画像スライダー（カルーセル）」の実装方法を学びます。
今回は、世界中で広く使われている軽量で高機能なJavaScriptライブラリ「Swiper.js」を使った、簡単で確実な方法を紹介します。
smart_display動作サンプル
実際に動作するサンプルです。左右の矢印や、下のドットをクリックして、スライドが切り替わるのを確認してみてください。
このサンプルを実装するためのHTMLとJavaScriptのコードは以下の通りです。
code実装コード解説
1. HTMLの構造
Swiper.jsが指定する、決まったクラス名を持つHTML構造を用意します。
<!-- 全体を囲むコンテナ -->
<div class="swiper">
<!-- スライドを直接囲むラッパー -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide">スライド1</div>
<div class="swiper-slide">スライド2</div>
<div class="swiper-slide">スライド3</div>
</div>
<!-- ページネーション（ドット） -->
<div class="swiper-pagination"></div>
<!-- ナビゲーション（矢印） -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>2. CSSのスタイル
基本的なスタイルは、`functions.php`で読み込んだSwiperのCSSが自動で適用してくれます。コンテナの大きさなど、サイトに合わせた調整だけ行います。
.swiper-container-sample {
width: 100%;
height: 400px; /* スライダーの高さを指定 */
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}3. JavaScriptの処理
Swiperを初期化し、オプションを設定します。オプションを変更することで、様々な挙動のスライダーを簡単に作ることができます。
// swiper.js
new Swiper('.swiper', {
// オプション設定
loop: true, // ループさせる
// ページネーション（ドット）
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// ナビゲーション（矢印）
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});