Swiperを利用してのスライダーの実装とカスタマイズ方法

今回は、ウェブサイトに画像スライダーを追加する方法を紹介します。ここでは、人気のライブラリ「Swiper」を使用して、基本的なスライダーの設置手順を初心者向けに説明します。

Swiperとは
1. Swiperの特徴
2. Swiperの公式サイト
スライダーの基本的な実装
フェードエフェクト付きスライダーの実装
ナビ関連

Swiperとは

Swiperは、ウェブ開発者にとって便利なスライダーライブラリです。このライブラリを使うと、画像やコンテンツを美しくスライドさせることができます。たとえば、最新のプロジェクトや商品をユーザーにアピールするために使えるでしょう。

Swiperの特徴

使いやすさ
Swiperは初心者でも簡単に導入できます。HTMLやJavaScriptの基礎知識さえあれば、すぐに使い始めることができます。
カスタマイズ性
スタイルや動作を細かく調整できるため、自分のウェブサイトに合ったスライダーを作成することができます。例えば、自動再生やナビゲーションボタンの追加などが可能です。
豊富な機能
フェードエフェクト、ループ再生、ページネーション、スワイプ機能の制御など、多彩な機能が揃っています。

Swiperの公式サイト

Swiperを詳しく知りたい方は、公式サイトを訪れてみてください。こちらでドキュメントやデモ、最新情報を確認することができますので興味があれば是非！

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hard...

スライダーの基本的な実装

See the Pen swiper _test_slide by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

まず、Swiperを使った基本的なスライダーの実装を見ていきましょう。

必要なファイルの読み込み

最初に、SwiperのCSSとJavaScriptファイルをHTMLに読み込みます。

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

HTMLコード

次に、スライダーのHTML構造を作成します。

<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="Item">
                <img src="https://example.com/image1.jpg" alt="Image 1">
            </div>
        </div>
        <div class="swiper-slide">
            <div class="Item">
                <img src="https://example.com/image2.jpg" alt="Image 2">
            </div>
        </div>
        <div class="swiper-slide">
            <div class="Item">
                <img src="https://example.com/image3.jpg" alt="Image 3">
            </div>
        </div>
    </div>
</div>

CSSコード

次に、スタイルを設定します。

body, html {
    margin: 0;
    padding: 0;
}

.swiper-container {
    width: 100%;
    height: 80vh;
    position: relative;
    overflow: hidden;

    @media (max-width: 768px) {
        height: 50vh;
        min-height: 450px;
    }
}

.Item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.Item img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    @media (max-width: 768px) {
        height: 50vh;
        min-height: 450px;
    }
}

JavaScriptコード

最後に、Swiperの設定をJavaScriptで行います。

var swiper = new Swiper('.swiper-container', {
    loop: true,
    autoplay: {
        delay: 3000,
    },
    speed: 1000,
    slidesPerView: 1,
    spaceBetween: 0,
});

フェードエフェクト付きスライダーの実装

See the Pen swiper _test_fade by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

次に、スライドの切り替え時にフェードイン・フェードアウトのエフェクトを持たせたスライダーの実装方法を紹介します。

HTMLコード

基本のHTMLコードに変わりはありません。

<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="Item">
                <img src="https://as1.ftcdn.net/v2/jpg/06/23/92/84/1000_F_623928447_32m8fF2EuEF33sDaDkYvYWNl00Ll0uKb.jpg" alt="Image 1">
            </div>
        </div>
        <div class="swiper-slide">
            <div class="Item">
                <img src="https://as1.ftcdn.net/v2/jpg/05/98/25/52/1000_F_598255224_Iah4fY4P7chrW5FGIbeO2zSomm5B3o8J.jpg" alt="Image 2">
            </div>
        </div>
        <div class="swiper-slide">
            <div class="Item">
                <img src="https://as1.ftcdn.net/v2/jpg/02/23/20/90/1000_F_223209037_YWGRd9GjIxA1Us1P2LhsGuuuy3U1mAeA.jpg" alt="Image 3">
            </div>
        </div>
    </div>
</div>

CSSコード

CSSコードも基本の部分に変わりはありませんが、フェードエフェクトのための追加スタイルがあります。

<style>
body, html {
    background-color: aqua;
    margin: 0;
    padding: 0;
}

.swiper-container {
    width: 100vw; /* 画面幅いっぱいに設定 */
    height: 80vh; /* 画面の高さの80%に設定 */
    position: relative; /* 相対位置指定 */
    overflow: hidden; /* 内容がはみ出した場合は隠す */

    /* スマートフォンサイズの場合の設定 */
    @media (max-width: 768px) {
        height: 50vh; /* 高さを50%に設定 */
        min-height: 450px; /* 最小高さを450pxに設定 */
    }
}

.swiper-wrapper {
    transition: opacity 1s ease; /* スライドのフェードイン・フェードアウトのアニメーション */
}

.swiper-slide {
    opacity: 0; /* 最初はすべてのスライドを非表示にする */
    transition: opacity 0.5s ease; /* 各スライドのフェードインのアニメーション */
}

.swiper-slide-active {
    opacity: 1; /* アクティブなスライドをフェードイン */
}

.Item {
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
    display: flex; /* Flexbox を使用 */
    justify-content: center; /* 中央揃え */
    align-items: center; /* 中央揃え */
    position: relative; /* 相対位置指定 */
}

.Item img {
    width: 100%; /* 画面幅いっぱいに設定 */
    height: 100%; /* 画面の高さの80%に設定 */
    object-fit: cover; /* 画像を親要素にフィットさせる */

    /* スマートフォンサイズの場合の設定 */
    @media (max-width: 768px) {
        height: 50vh; /* 高さを50%に設定 */
        min-height: 450px; /* 最小高さを450pxに設定 */
    }
}
</style>

JavaScriptコード

フェードエフェクトを有効にするための設定を追加します。

<script>
var swiper = new Swiper('.swiper-container', {
    effect: 'fade', // フェードエフェクトを指定
    speed: 1000, // スライドの切り替え速度（1秒）
    fadeEffect: {
        crossFade: true
    },
    autoplay: {
        delay: 5000, // 5秒ごとに次のスライドに切り替わる
        disableOnInteraction: false, // ユーザー操作後も自動再生を継続する
    },
    allowTouchMove: false, // スワイプ機能を無効にする
});
</script>

補足

今回は「allowTouchMove: false, // スワイプ機能を無効にする」を利用して、ユーザがワイプをしても次の画像を見れないようにしています。
スライドの方は個人的にはスワイプでの切り替えがあったほうが便利だと思いますスワイプ機能はそのままにしてますが、フェードの時は個人的には毎回切るようにしています。

ナビ関連

See the Pen swiper _test by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

ナビゲーションボタンやページネーションを追加する方法についても簡単に説明します。

HTMLコード

ナビゲーションボタン用のHTML要素を追加します。

<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- スライドの内容は省略 -->
    </div>
    <!-- ページネーション -->
    <div class="swiper-pagination"></div>
  
    <!-- 前へ/次へボタン -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

JavaScriptコード

Swiperの設定にナビゲーションやページネーションオプションを追加します。

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1, // 画面に表示するスライドの数。1枚ずつ表示。
  loop: true, // スライドをループさせる。最後のスライドの後に最初のスライドに戻る。
  autoplay: {
    delay: 5000, // 自動再生の間隔（ミリ秒）。ここでは5秒ごとにスライドが切り替わる。
    disableOnInteraction: false, // ユーザーのスライド操作後も自動再生を継続する。
  },


  //以下ナビゲーション、ページネーション

  navigation: {
    nextEl: '.swiper-button-next', // 次のスライドに進むナビゲーションボタンの要素。
    prevEl: '.swiper-button-prev', // 前のスライドに戻るナビゲーションボタンの要素。
  },
  pagination: {
    el: '.swiper-pagination', // ページネーション（スライドのインデックスを表示する要素）の要素。
    clickable: true, // ページネーションをクリック可能にする。
  },
});

これで、ナビゲーションやページネーションが追加されるようになります。
各ナビ関連をクリックすると、スライドされるようにもなるので、ユーザーに操作してほしい場合は追加してみてください。

まとめ

以上で、基本的なスライダーとフェードエフェクト付きスライダーの実装方法について紹介させていただきました！

このコードを活用して、魅力的な画像スライダーをウェブサイトに組み込んでみてください。
スライダーの設定やスタイルは、必要に応じてカスタマイズ可能ですので、自分のプロジェクトに合ったスライダーを作成しましょう。

また公式サイトの方では様々なスライダーを紹介していますので、興味のある方は公式サイトも御覧ください。