HTML/JS初心者向けSwiper入門｜スライダーをコピペで作る方法

Swiperとは？

      See the Pen
Untitled by 広瀬和哉 (@lpvcfdes-the-styleful)
on CodePen.

Swiperは、高機能で軽量なJavaScript製スライダーライブラリです。
Webサイトのトップ画像や商品紹介、画像ギャラリーなど幅広く使われています。

• レスポンシブ対応（スマホ・PCでの出し分け）
• 自動再生・ループ設定が簡単
• スマホのスワイプ操作（タッチ操作）に標準対応
• デザインの自由度が高い

Swiperの導入方法（CDN）

今回は初心者向けにCDNを使った方法を紹介します。
ファイルをダウンロードする必要がなく、以下のコードを貼るだけでSwiperの準備が完了します。

① head内にCSSを読み込む

まずはスタイルシートを読み込みます。

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

② bodyの最後にJSを読み込む

次に、動作に必要なJavaScriptファイルを読み込みます。

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

HTMLの基本構造

Swiperには動作に必要な決まったHTML構造があります。
クラス名を変更すると動かなくなるため、まずは以下のコードをそのまま使用してください。

<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-next"></div>
  <div class="swiper-button-prev"></div>
</div>

CSS（最低限のスタイル）

スライダーの表示領域を確保するためのCSSです。
画像を使用する場合は、imgタグへのスタイル指定もここで行います。

.swiper {
  width: 100%;
  height: 300px; /* 高さは自由に調整してください */
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  font-size: 24px;
}

JavaScriptで初期化する

最後に、JavaScriptを書いてSwiperを起動させます。
基本的な設定に加えて、よく使われるオプション設定を含めたコードです。

const swiper = new Swiper(".swiper", {
  loop: true, // ループさせる
  
  // ページネーション設定
  pagination: {
    el: ".swiper-pagination",
    clickable: true, // クリック可能にする
  },
  
  // ナビゲーション設定
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

よく使うオプション設定

Swiperはオプションを追加するだけで簡単にカスタマイズできます。

自動再生を追加する例

スライドを自動で流したい場合は、以下のコードを追加します。

autoplay: {
  delay: 3000, // 3秒ごとに切り替え
},

Swiperが動かないときの確認ポイント

「コードを貼ったのに動かない」という場合は、以下の3点を確認してください。

• CDNの読み込み順: CSSはhead内、JSはbodyの閉じタグ直前にありますか？
• クラス名: .swiper や .swiper-wrapper などのスペルミスはありませんか？
• JSの記述位置: HTML要素よりも「下」にスクリプトを書いていますか？

特に「scriptタグがHTMLより上にある」ことでエラーになるケースが多いです。

まとめ

• SwiperはCDNを使えばコピペだけで導入できる
• HTML構造（クラス名）を守ることが重要
• JSは初期化コードを書くだけでOK

まずは基本の形を表示させてみて、慣れてきたらオプションでカスタマイズに挑戦してみてください！