本ページはプロモーションが含まれています

【コピペOK】プラグインに頼らない！Swiper.jsで作るリッチなスライダー実装入門でいこう

公開日

ブログやコーポレートサイトのトップページでよく見かける「画像が横にスライドする機能（カルーセルスライダー）」。

WordPressにはスライダー用のプラグインがいくつかありますが、「デザインを自由に変えられない」「サイトの表示速度が遅くなる」といったデメリットがあります。

そこでWeb制作の現場で最も使われているのが、超高機能で軽量なJavaScriptライブラリ「Swiper.js」です。この記事では、プラグインに頼らずコピペで簡単にSwiperを実装する方法を解説します！

完成イメージ（デモ）

まずは実際に動くスライダーをご覧ください。パソコンならマウスでドラッグ、スマホならスワイプで動かすことができます。（自動再生も設定しています）

Slide 1
Slide 2
Slide 3
Slide 4

Swiper.jsの導入手順（3ステップ）

実装は「ファイルの読み込み」「HTMLの記述」「JSで動かす」のたった3ステップです。

ステップ1：Swiper本体を読み込む（CDN）

まずはSwiperを動かすためのCSSとJavaScriptファイルを読み込みます。ファイルをダウンロードする必要はなく、以下の「CDN」と呼ばれるリンクをHTMLの <head> タグ内、または記事の上にコピペするだけで準備完了です。

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

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

ステップ2：HTMLの基本構造を書く

Swiperを正しく動かすためには、決められたクラス名（swiper, swiper-wrapper, swiper-slide）を使う必要があります。以下のHTMLをスライダーを表示したい場所にコピペしてください。

<div class="swiper kz-swiper-demo">
  <div class="swiper-wrapper">
    <!-- ここにスライドさせたい画像や要素を入れます -->
    <div class="swiper-slide slide-bg-1"><img src="image1.jpg" alt="スライド1"></div>
    <div class="swiper-slide slide-bg-2"><img src="image2.jpg" alt="スライド2"></div>
    <div class="swiper-slide slide-bg-3"><img src="image3.jpg" alt="スライド3"></div>
  </div>
  
  <!-- 画面下部のドット（ページネーション） -->
  <div class="swiper-pagination"></div>
  
  <!-- 左右の矢印（ナビゲーション） -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

ステップ3：JavaScriptでスライダーを起動する

最後に、スライダーに「ループさせる」「自動再生する」などの指示を出すJavaScriptを書きます。以下のコードをHTMLの一番下、またはJSファイルに記述してください。

<script>
  const swiper = new Swiper('.kz-swiper-demo', {
    // 最後のスライドまで行ったら最初に戻る（ループ設定）
    loop: true,

    // 自動再生の設定
    autoplay: {
      delay: 3000, // 3秒（3000ミリ秒）ごとにスライド
      disableOnInteraction: false, // ユーザーが操作した後も自動再生を止めない
    },

    // 画面下部のドット設定
    pagination: {
      el: '.swiper-pagination',
      clickable: true, // ドットをクリックでスライド切り替え可能に
    },

    // 左右の矢印ボタン設定
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>
デザインの調整について

幅や高さ、矢印の色などは通常のCSSで .kz-swiper-demo などのクラスに対してスタイルを指定するだけで自由にカスタマイズ可能です！

まとめ：実務レベルのスライダーをサクッと実装！

Swiper.jsを使えば、重いプラグインを入れなくても、コピペだけで実務レベルの高機能なスライダーが実装できます。

さらに高度なカスタマイズ（フェード切り替え、サムネイル連動など）を行いたい場合は、Swiper公式のデモページ（英語）にたくさんのサンプルコードが用意されているので、ぜひチャレンジしてみてくださいね！

一覧へ!