Swiperをスマホのみに適用し、PCでは通常表示する方法【簡単実装ガイド】

Swiper は、Webサイトやアプリでスライダーを簡単に実装できる人気のライブラリです。
しかし、「スマホではSwiperを使いたいが、PCではそのまま画像を表示したい」というケースもあります。

本記事では、スマホのみにSwiperを適用し、PCでは通常の画像表示を維持する方法を詳しく解説します。

1. Swiperをスマホのみに適用する方法

実装の流れ

1. PCでは通常の画像レイアウトを表示（Swiperを無効化）
2. スマホ時のみSwiperを適用（画像をスライダー化）
3. 画面サイズの変更時にSwiperの適用・解除を切り替え

2. HTMLの準備

まずは、PC・スマホ両方で使える汎用的なHTMLを用意します。

<div class="image-container">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image1.jpg" alt="Image 1"></div>
            <div class="swiper-slide"><img src="image2.jpg" alt="Image 2"></div>
            <div class="swiper-slide"><img src="image3.jpg" alt="Image 3"></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <div class="static-images">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
</div>

ポイント

• .swiper-container → スマホ時のみ表示
• .static-images → PC時のみ表示

3. CSSでPC時とスマホ時の表示を切り替え

スマホ時は .static-images を非表示にし、Swiperを適用。
PC時は .swiper-container を非表示にし、通常の画像表示に切り替えます。

/* PC時（Swiper無効） */
@media (min-width: 768px) {
    .swiper-container {
        display: none;
    }
    .static-images {
        display: flex;
        gap: 20px;
    }
    .static-images img {
        width: 30%;
    }
}

/* スマホ時（Swiper適用） */
@media (max-width: 767px) {
    .swiper-container {
        display: block;
    }
    .static-images {
        display: none;
    }
}

4. JavaScriptでSwiperをスマホ時のみ適用

画面サイズを判定し、スマホのときだけSwiperを初期化するスクリプトを追加します。

let swiper;

function initSwiper() {
    if (window.innerWidth < 768) {
        if (!swiper) {
            swiper = new Swiper(".swiper-container", {
                loop: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            });
        }
    } else {
        if (swiper) {
            swiper.destroy(true, true);
            swiper = null;
        }
    }
}

window.addEventListener("load", initSwiper);
window.addEventListener("resize", initSwiper);

ポイント

• スマホ時（768px未満）にSwiperを適用
• PC時（768px以上）にSwiperを破棄
• 画面リサイズ時も適用状態をチェック

5. まとめ

この方法を使えば、スマホではスライダー、PCでは通常の画像表示が簡単に実現できます。
サイトのレイアウトに合わせて、最適な方法を選んでください！

補足：SEOへの影響について

Swiperの display: none はGoogleのクローラーがコンテンツを認識しにくくなる可能性があります。
display: none の代わりに opacity: 0 や visibility: hidden を使うことでSEO対策が可能 です。

スマホとPCでのレイアウト最適化に、ぜひ活用してみてください！