Swiper.jsでPCとスマホで異なる設定を適用し、複数のスライダーを設置する方法 |

1. はじめに

Swiper.js は、PCとスマホのデバイスによって異なる設定を適用できる高機能なスライダーライブラリです。

本記事では、PCとスマホで設定を変えながら、同じページに複数のSwiperスライダーを設置する方法 を解説します。

以下のポイントを抑えながら、初心者でも実装できるように解説していきます。

✅ PCとスマホで異なる設定を適用する方法

✅ Swiperの複数インスタンスを適切に管理する方法

✅ ウィンドウサイズの変更時にスライダーを再設定する方法

2. HTMLのマークアップ

まず、Swiper.jsのスライダーを設置するHTMLを用意します。

各スライダーには異なる class を付け、CSSとJavaScriptで適用できるようにしておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PCとスマホで設定が変わるSwiper</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
</head>
<body>

    <!-- スライダー１ -->
    <div class="slider-container">
        <div class="swiper slider-gallery">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="image1.jpg" alt="画像1"></div>
                <div class="swiper-slide"><img src="image2.jpg" alt="画像2"></div>
                <div class="swiper-slide"><img src="image3.jpg" alt="画像3"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <!-- スライダー２ -->
    <div class="slider-container">
        <div class="swiper slider-works">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="work1.jpg" alt="作品1"></div>
                <div class="swiper-slide"><img src="work2.jpg" alt="作品2"></div>
                <div class="swiper-slide"><img src="work3.jpg" alt="作品3"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="script.js"></script>

</body>
</html>

3. CSSのスタイリング

デフォルトのSwiperのデザインを適用しつつ、シンプルで見やすいレイアウトに調整します。

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    text-align: center;
}

.slider-container {
    width: 90%;
    max-width: 800px;
    margin: 40px auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.swiper {
    width: 100%;
    height: 300px;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.swiper-pagination {
    position: absolute;
    bottom: 10px;
}

4. JavaScriptでSwiperを設定する

次に、Swiper.jsをPCとスマホで異なる設定を適用しつつ、複数のスライダーを適切に管理 できるようにします。

// script.js
let swiperInstances = []; // Swiperインスタンスを管理する配列

function initializeSwiper() {
    // 画面サイズ判定 (768px以下ならSP、それ以上はPC)
    const isMobile = window.matchMedia('(max-width: 768px)').matches;

    // 既存のSwiperインスタンスを全て破棄
    swiperInstances.forEach(instance => instance.destroy(true, true));
    swiperInstances = [];

    // 共通のSwiper設定
    const commonSettings = {
        direction: 'horizontal',
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    };

    // スマホ向け設定
    const mobileSettings = {
        ...commonSettings,
        effect: 'creative',
        speed: 500,
        creativeEffect: {
            prev: { shadow: true, translate: ['-100%', 0, -300], opacity: 0.5 },
            next: { shadow: true, translate: ['100%', 0, -300], opacity: 0.5 },
        },
        centeredSlides: true,
        slidesPerView: 1.3,
        spaceBetween: 10,
    };

    // PC向け設定
    const pcSettings = {
        ...commonSettings,
        speed: 1400,
        slidesPerView: 1.4,
        spaceBetween: 30,
    };

    // 各スライダーを初期化
    swiperInstances.push(new Swiper('.slider-gallery', isMobile ? mobileSettings : pcSettings));
    swiperInstances.push(new Swiper('.slider-works', isMobile ? mobileSettings : pcSettings));

    // PCの場合のみ、ウィンドウサイズ変更時に再初期化
    if (!isMobile) {
        window.addEventListener('resize', initializeSwiper);
    }
}

// 初回読み込み時にSwiperを初期化
initializeSwiper();

5. まとめ

本記事では、PCとスマホで異なる設定を適用しながら、複数のSwiperスライダーを管理する方法 を解説しました。

✅ PCとSPで異なる設定を適用（window.matchMedia を利用）

✅ Swiperの複数インスタンスを管理（destroy(true, true) でリセット）

✅ ウィンドウリサイズ時の適切な処理（PCのみ再初期化）

これらを適用すれば、レスポンシブなスライダーをスムーズに実装できます。

Swiper.jsを活用して、より魅力的なサイトを作ってみましょう！

(Visited 1 times, 1 visits today)

1. はじめに

2. HTMLのマークアップ

3. CSSのスタイリング

4. JavaScriptでSwiperを設定する

5. まとめ

関連投稿: