アジェンダ
HTMLとJavaScriptで利用できるスライダープラグイン「Swiper」を使ったカルーセルスライダーの実装方法について、サンプルコードを参考にしながら、基本的な設定とカスタマイズの方法について簡単に記述します。
Swiperとは？
Swiperは、レスポンシブなスライダーやカルーセルを作成できるJavaScriptライブラリです。軽量でカスタマイズ性が高く、タッチ対応もしているため、スマートフォンやタブレット向けのスライダーにも最適です。
※以下はSwiperのHPになります。
Swiperのインストール方法
SwiperはCDNを利用して簡単に組み込むことができます。まず、以下のようにHTMLファイルにSwiperのスタイルシートとスクリプトを追加します。
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
このコードを<head>タグの中に入れて、スタイルシートとJavaScriptファイルをインポートします。
※以下はGetting Startedになります。
Swiperの基本構造
Swiperを利用するためには、HTML構造に特定のクラスを設定する必要があります。以下は、Swiperを利用したシンプルなスライダーのHTML構造の例です。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./assets/img/item-card-img-1.png" alt="商品1">
<p>商品名1</p>
</div>
<div class="swiper-slide">
<img src="./assets/img/item-card-img-2.png" alt="商品2">
<p>商品名2</p>
</div>
<div class="swiper-slide">
<img src="./assets/img/item-card-img-3.png" alt="商品3">
<p>商品名3</p>
</div>
<!-- さらにスライドを追加 -->
</div>
</div>
-
swiperクラス: スライダー全体を囲むコンテナ。 -
swiper-wrapperクラス: スライドを包むラッパー。 -
swiper-slideクラス: 各スライドのコンテンツ。
Swiperの初期化
次に、Swiperの初期化コードを追加します。このコードは<script>タグ内に記述し、スライドの表示や動作をカスタマイズします。
var swiper = new Swiper(".swiper", {
slidesPerView: "auto", // スライドの表示枚数を自動に設定
spaceBetween: 1, // スライド間のスペース
grabCursor: true, // カーソルを掴むような効果
mousewheel: { // マウスホイールでの操作設定
enabled: true, // マウスホイール操作を有効に
sensitivity: 5, // 感度を設定
forceToAxis: true, // 水平方向のみに制限
},
});
設定オプションの解説
-
slidesPerView: 一度に表示されるスライドの数を指定します。"auto"を指定すると、スライドのサイズに応じて自動的に調整されます。 -
spaceBetween: スライド同士の間隔をピクセル単位で設定します。 -
grabCursor: カーソルが掴むような見た目になるエフェクトを追加します。 -
mousewheel: マウスホイールでのスライド移動を可能にし、感度や方向を設定します。
Swiperのカスタマイズ
Swiperには多くのオプションがあり、ニーズに応じてさまざまなカスタマイズが可能です。たとえば、以下のようにページネーションやナビゲーションボタンを追加することもできます。
ページネーションの追加
var swiper = new Swiper(".swiper", {
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
ナビゲーションボタンの追加
var swiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
自動スライド
var swiper = new Swiper(".swiper", {
autoplay: {
delay: 3000, // 3秒ごとにスライドを自動切り替え
},
});
まとめ
Swiperは、簡単に導入でき、豊富なカスタマイズオプションを提供するスライダープラグインです。今回紹介した基本的な設定をもとに、さらに高度なスライダーを作成することが可能です。ぜひ、実際のプロジェクトでSwiperを活用してみてください。