MENU

JavaScript

jQuery不要！Swiperの基本的な使い方と設置方法【コピペで動く実例付き】

jQuery不要！Swiperの基本的な使い方と設置方法【コピペで動く実例付き】
ENOWL_Nao

どうも、こんにちは。
Webデザイナーのなお（@ENOWL_Nao）です。

Webサイトのトップページでよく見かける、画像が横にスライドする動き。「スライダー」や「カルーセル」と呼ばれますが、これを実装するライブラリはいくつか存在します。
その中でも、現在は「Swiper（スワイパー）」が非常に人気があり、Web制作の現場でも定番としてよく使われていますよね。

SwiperはjQueryに依存せず単体で動くため、余計なファイルを読み込まず動作が軽いのが特徴です。また、スマホでのタッチ操作の感度も良く、サクサク動いてくれます。

今回は、HTML/CSSを勉強中の方に向けて、「コピペだけで動く」Swiperの基本的な設置方法をステップバイステップで解説します。
備忘録として手順をまとめておきますので、同じように実装方法で悩んでいる方の参考になれば嬉しいです！

この記事の見出し
  1. Swiper導入の手順
    1. ステップ1：CDNを読み込む
    2. ステップ2：HTMLの構造を作る
    3. ステップ3：JavaScriptで起動する
  2. 【実践】コピペで完了！動くサンプルコード
  3. 上手く動かない時のチェックリスト
    1. CDNのリンク切れはありませんか？
    2. 「swiper-wrapper」を忘れていませんか？
    3. JSファイルの読み込み順序は大丈夫？
  4. まとめ

Swiper導入の手順

Swiperを動かすために必要な準備は、大きく分けて以下の3つです。

  • Swiperのファイルを読み込む（CDN）
  • HTMLを書く（決まった箱を用意する）
  • Swiperを起動する（JavaScriptを少しだけ書く）

難しそうに見えますが、決まった型があるので安心してください。
手順は以下の通りです。

ステップ1：CDNを読み込む

まずは、Swiperの機能を使うための「CSS」と「JavaScript」のファイルを読み込みます。
ファイルをダウンロードする必要はありません。「CDN」という仕組みを使って、以下のコードを貼り付けるだけでOKです。

▼ <head>タグの中に貼り付けるコード（CSS）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

▼ </body>タグの直前に貼り付けるコード（JS）

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

ステップ2：HTMLの構造を作る

Swiperには「このクラス名を使ってください」という決まりがあります。
以下の3層構造を守るのがポイントです。

  • swiper：全体を包む大きな箱
  • swiper-wrapper：スライドを包む帯状の箱
  • swiper-slide：スライドさせたい中身（画像や文字）
<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>

ステップ3：JavaScriptで起動する

最後に、「この設定で動いてね」という指示をJavaScriptで書きます。
</body>タグの直前（ステップ1で読み込んだJSファイルより下）に記述します。

const swiper = new Swiper('.swiper', {
  loop: true, // 最後までいったら先頭に戻るループ
  
  // ページネーション（点々）の設定
  pagination: {
    el: '.swiper-pagination',
    clickable: true, // 点々をクリックして切り替えられるようにする
  },
  
  // ナビゲーション（左右の矢印）の設定
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

【実践】コピペで完了！動くサンプルコード

ここまでの内容をすべてまとめたコードがこちらです。 このままHTMLファイルとして保存すれば、すぐにスライダーが動く様子を確認できます。

デモはこちらから

分かりやすいように、スライドには色をつけています。実際に使うときは スライド1 の部分を <img> タグなどに置き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swiper基本のデモ</title>
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  
  <style>
    /* スライダーのサイズ調整（お好みで変更してください） */
    .swiper {
      width: 100%;
      height: 300px;
      margin-top: 50px;
    }
    
    /* スライドの見た目調整 */
    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
    }

    /* 各スライドの背景色（区別しやすくするため） */
    .slide1 { background-color: #fca5a5; } /* 薄い赤 */
    .slide2 { background-color: #86efac; } /* 薄い緑 */
    .slide3 { background-color: #93c5fd; } /* 薄い青 */
  </style>
</head>
<body>

  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide1">スライド 1</div>
      <div class="swiper-slide slide2">スライド 2</div>
      <div class="swiper-slide slide3">スライド 3</div>
    </div>
    
    <div class="swiper-pagination"></div>
    
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

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

  <script>
    const swiper = new Swiper('.swiper', {
      // オプション設定
      loop: true, // ループさせる
      speed: 1000, // 切り替わる速度（ミリ秒）
      
      // 自動再生の設定（オプション）
      autoplay: {
        delay: 3000, // 3秒ごとに切り替え
        disableOnInteraction: false, // ユーザーが触っても自動再生を止めない
      },

      // ページネーション
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },

      // ナビゲーション
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>
</html>

上手く動かない時のチェックリスト

もし動かない場合は、以下のポイントを確認してみてください。

CDNのリンク切れはありませんか？

<head>内と</body>直前のリンクが正しいか、もう一度コピーし直してみましょう。

「swiper-wrapper」を忘れていませんか？

全体を囲む.swiperのすぐ下に、.swiper-wrapperという箱が必要です。 swiper > swiper-wrapper > swiper-slide という3層構造になっているか確認しましょう。

JSファイルの読み込み順序は大丈夫？

Swiperの本体（CDN）を読み込む前に、new Swiper(...)を実行していませんか？
必ず「CDNの読み込み」→「自分の記述」の順に書いてください。

まとめ

今回は、Swiperの基本的な使い方と設置方法について解説しました。

  • Swiperは「CDN読み込み」「決まったHTML」「起動JS」の3セットで導入できる
  • まずはサンプルコードをコピペして動かしてみるのがおすすめ
  • スライドの中身を好きな画像に差し替えれば完成！

これさえ覚えれば、プロのようなWebサイト表現にぐっと近づけますよ！
ぜひ試してみてくださいね！

最後まで読んでいただき、ありがとうございました！
では、また！

Xからの読者コメントをお待ちしています。
ブログ更新の励みになります！
個人事業主さまの「Web担当」

そのWebの悩み
一人で抱え込んでいませんか？

「ちょっとここを直したい」「そろそろリニューアルしたい」…。
小さな修正から本格的な制作まで、Webに関する「どうしよう」を私が丸ごと受け止めます。難しい専門用語は使いません。
あなたの事業を支えるパートナーとして、まずは気軽にお話ししませんか？

ココナラで相談する
私について
なお
なお
Webデザイナー
InstagramContact
ホームページをご覧いただきありがとうございます！ なおと申します。 現在はフリーランスのWebデザイナーとして活動しています。 WebデザインからコーディングからWordPress実装まで一貫してホームページ制作を行うことができます。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました