初心者必見！cdnとswiperで簡単にスライダー導入する方法

2025 11/30

2025/11/30

はじめに

この章では、本書の目的と読み方、想定する読者層、準備事項をわかりやすく説明します。

本書の目的

Swiper.jsをCDN経由で導入し、実際のスライダーを作れるようになることを目的とします。基本の導入方法から、ES Module対応、HTMLの構造、ナビゲーションやコールバックの活用、主要フレームワークやWordPressへの組み込みまで順を追って解説します。

想定読者

HTMLとCSSの基礎があり、JavaScriptで簡単な処理を書いたことがある方を想定します。初めてSwiperを触る方にも配慮して丁寧に説明します。

前提と準備

テキストエディタとブラウザがあれば始められます。サンプルコードは動作確認しやすいようにCDNを使った実例で示します。

今後の章で実際に手を動かしながら進めます。必要な部分を順に読み、サンプルを試してください。

Swiper.jsとは何か

概要

Swiper.jsは、タッチ操作に最適化された軽量なJavaScriptスライダーライブラリです。モバイルやデスクトップで指やマウスでスライドを切り替えられ、滑らかなアニメーションを実現します。開発者にとって使いやすく、見た目も洗練されたスライダーを短時間で作れます。

主な特徴

タッチ＆ドラッグ操作：スマホで自然に動きます。
レスポンシブ対応：画面サイズに合わせて表示を調整します。
ナビゲーションとページネーション：前後ボタンやドット表示を簡単に追加できます。
自動再生・遅延読み込み：パフォーマンスとユーザビリティを両立します。
モジュール設計と拡張性：必要な機能だけ読み込み可能です。

使われる場面（具体例）

商品画像ギャラリーやカルーセル
トップページのヒーロースライダー
おすすめ記事のカード表示

なぜ選ばれるか

動作が軽く、さまざまな機能を柔軟に組み合わせできる点が評価されています。短い工数で見栄えの良いスライダーを実装したい場合に向きます。

CDNを使用したSwiper.jsの導入方法

概要

Swiper.jsを最速で試すにはCDNが便利です。ビルドやパッケージ管理が不要で、HTMLに数行追加するだけで動きます。プロトタイピングやデモに向きます。

導入手順（基本）

HTMLのにCSSを読み込みます。
直前でJSを読み込み、初期化スクリプトを実行します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
  const swiper = new Swiper('.swiper', { loop: true, pagination: { el: '.swiper-pagination' } });
</script>

実用上の注意点

バージョン指定（@11や@11.0.0）で意図した挙動を維持します。
スクリプトはDOM後に実行するか、defer属性を使ってください。
オフラインや厳密な依存管理が必要な場合はローカル配布を検討してください。

短所と推奨シーン

CDNは手軽ですが、ビルド最適化や細かいカスタマイズが必要な本番環境では、パッケージ管理やバンドル導入に切り替えると良いです。まずはCDNで素早く動作確認することをおすすめします。

ES Moduleを使用したCDN導入

概要

ブラウザでES Moduleを使う場合は、CDNのモジュール版を直接読み込めます。type=”module”を付けると、スクリプトはモダンなモジュールとして扱われ、自動的に遅延実行されます。

基本的な使い方

にCSSを置き、body内でモジュールを読み込みます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script type="module">
  import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'
  const swiper = new Swiper('.swiper', {
    loop: true,
    pagination: { el: '.swiper-pagination' }
  })
</script>

モジュール版は名前空間を汚さず、他のモジュールと共存しやすいです。

ブラウザ互換性とフォールバック

ほとんどの現代ブラウザはES Moduleをサポートしますが、古いブラウザでは動作しません。古い環境向けにはUMD版（通常の）を併用すると安心です。

応用例と注意点

条件による遅延読み込み: 動的import()で必要時に読み込めます。例: if(needSwiper){ const {default: Swiper} = await import(‘…mjs’) }
モジュールはCORS制約を受けます。ローカルで試すときは簡易サーバーを使ってください。
CSSはで読み込むのが確実です。JSからのCSS読み込みはブラウザ依存になります。

HTMLスライダー構造の基本設定

基本構造

Swiper.jsでは次の3つの要素が最低限必要です。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

各要素の役割

.swiper（コンテナ）: スライダー全体を包みます。スタイルや初期化時のターゲットになります。
.swiper-wrapper（ラッパー）: スライドを横並びにするための内側要素です。
.swiper-slide（スライド）: 各スライド単位。画像やテキストを入れます。

ナビゲーションとページネーションの追加

操作性を高める場合は、HTMLに要素を追加します。

<div class="swiper">
  <div class="swiper-wrapper">...</div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-pagination"></div>
</div>

これらは初期化時にオプションで有効化します。

注意点

要素は正しくネストしてください。構造が崩れると動作しません。
スタイルで幅・高さを指定すると表示が安定します。
スライド内にリンクなどを置く場合はキーボード操作やARIA属性でアクセシビリティを補強してください。

ナビゲーション機能の実装

概要

スライダーに前後の操作ボタンを追加すると、直感的にスライドを切り替えられます。ここではHTMLでボタンを用意し、JavaScriptでNavigationモジュールを有効にする基本手順を示します。

HTMLの追加例

Swiperの構造内にボタンを配置します。クラス名は設定と一致させます。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">スライド1</div>
    <div class="swiper-slide">スライド2</div>
  </div>
  <button class="swiper-button-prev">Prev</button>
  <button class="swiper-button-next">Next</button>
</div>

JavaScriptでの設定

Navigationモジュールを読み込み、nextEl/prevElを指定します。

const swiper = new Swiper('.swiper', {
  modules: [Navigation],
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

カスタマイズ例

ボタンの見た目はCSSで調整します（位置、色、アイコンなど）。
disabledClassやhideOnClickで非活性時の挙動を制御できます。

注意点

ボタンのクラス名が設定と一致しているか確認してください。
スライドが1枚しかない場合は非表示にするなど、ユーザー体験を考慮してください。

フレームワークとの統合

概要

Swiper.jsはReact、Vue、Next.jsなど主要フレームワークと相性が良く、専用ラッパーや公式コンポーネントを使うと実装が楽になります。ここでは具体例と注意点を丁寧に説明します。

Reactでの基本例

公式のReactコンポーネントを使うと、JSXで直感的に書けます。例：

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

function Gallery({ items }){
  return (
    <Swiper slidesPerView={1}>
      {items.map((src,i)=>(
        <SwiperSlide key={i}><img src={src} alt=""/></SwiperSlide>
      ))}
    </Swiper>
  );
}

状態が変わるときはuseEffectでSwiperの更新や再初期化を行ってください。

Vueでの利用

Vue用の公式ラッパーを使います。コンポーネント登録後、テンプレートで使えます：

<template>
  <swiper :slides-per-view="1">
    <swiper-slide v-for="(s,i) in slides" :key="i">{{ s }}</swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
export default { components:{ Swiper, SwiperSlide }, props:['slides'] }
</script>

リアクティビティと連携しやすく、watchで再描画を制御できます。

Next.js（SSR）での注意

サーバー側レンダリングではwindowが無いため、動的インポートを使います：

import dynamic from 'next/dynamic';
const Swiper = dynamic(()=>import('swiper/react').then(m=>m.Swiper),{ ssr:false });

これでクライアント側のみでSwiperを読み込み、エラーを避けます。

状態管理とライフサイクル

ReduxやVuexと組み合わせると、スライド内容を共通の状態で管理できます。データ変更後はswiper.update()を呼ぶと表示が整います。

実装時のチェックポイント

CSSの読み込み順を確認する
画像遅延読み込みでは更新処理を行う
プラグインやモジュールのバージョンを揃える

以上を踏まえれば、フレームワーク環境でも安定してSwiperを使えます。

WordPressでのSwiper.js実装

概要

WordPressでSwiper.jsを使う際は、CDNからCSSとJSをエンキューして、テーマやプラグイン内で初期化スクリプトを読み込みます。ここではfunctions.phpに追記する基本例と、HTML設置例を示します。

functions.phpへの追加例

function mytheme_enqueue_swiper(){
  wp_enqueue_style('swiper-css','https://unpkg.com/swiper/swiper-bundle.min.css');
  wp_enqueue_script('swiper-js','https://unpkg.com/swiper/swiper-bundle.min.js', array(), null, true);
  wp_enqueue_script('swiper-init', get_stylesheet_directory_uri().'/js/swiper-init.js', array('swiper-js'), null, true);
}
add_action('wp_enqueue_scripts','mytheme_enqueue_swiper');

swiper-init.jsの例

document.addEventListener('DOMContentLoaded', function(){
  var swiper = new Swiper('.swiper', {
    loop: true,
    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
    slidesPerView: 1
  });
});

テーマやブロックへの組み込み

テーマではテンプレートにSwiperのマークアップ（.swiper, .swiper-wrapper, .swiper-slide）を置き、必要なナビやページネーションを追加します。カスタムブロックではエディタとフロント両方にスクリプトをエンキューして初期化してください。

注意点

キャッシュ対策でスクリプトにバージョン指定を行うか、更新時にファイル名を変えると安全です。AMPや管理画面では読み込みを制限するなど調整してください。

Swiper.jsコールバックを使用した高度な制御

概要

Swiperのコールバックはスライドの状態変化に応じて処理を挟める仕組みです。たとえば遷移開始・終了でアニメーションやデータ読み込みを行うと、見た目と性能が両立できます。

よく使うコールバック

slideChange: 現在のスライドが変わった瞬間に呼ばれます。
slideChangeTransitionStart: 遷移開始時に呼ばれます。アニメーションのトリガーに便利です。
slideChangeTransitionEnd: 遷移終了時に呼ばれます。遅延読み込みの完了待ちに使えます。

実装例（簡単なフェードイン）

const swiper = new Swiper('.swiper', {loop:true});
swiper.on('slideChangeTransitionStart', ()=>{
  const active = swiper.slides[swiper.activeIndex];
  active.querySelectorAll('.animate').forEach(el=>{
    el.style.opacity = 0;
    el.style.transform = 'translateY(10px)';
  });
});
swiper.on('slideChangeTransitionEnd', ()=>{
  const active = swiper.slides[swiper.activeIndex];
  active.querySelectorAll('.animate').forEach((el,i)=>{
    setTimeout(()=>{
      el.style.transition = 'opacity .4s, transform .4s';
      el.style.opacity = 1;
      el.style.transform = 'translateY(0)';
    }, i*80);
  });
});

応用例

スライド表示時にAPIを呼んで画像を遅延読み込みする。
アクセシビリティ対応でフォーカス移動を制御する。

注意点

コールバック内で重い処理を直接行うとスクロールやアニメーションがカクつきます。必要ならばrequestAnimationFrameや非同期処理に分けて実行してください。

CDN統合のメリット

導入が簡単

CDNを使うとインストール作業が不要です。HTMLにCSSとJSの2行を追加するだけでSwiper.jsを利用できます。たとえば次のように書くだけで動作します。

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

この手軽さは、試作や短期間のサイトで特に役立ちます。

高速配信とグローバル性

CDNは世界各地に分散したサーバーからファイルを配信します。利用者に近いサーバーから落とされるため読み込みが速くなります。画像や動画ほどではありませんが、スクリプトの読み込み時間短縮に貢献します。結果としてページ全体の表示が早く感じられます。

ブラウザキャッシュの利点

多くのサイトが同じCDN上のSwiperを参照すると、訪問者のブラウザは一度ダウンロードしたファイルを再利用します。複数サイトを巡回するユーザーは、2回目以降の読み込みで時間を節約できます。

開発者にとっての利点

バージョン指定で安定したライブラリをすぐ使えます。CDNのURLを1行変えるだけでアップデートできます。

注意点

外部サービス依存のため稀に読み込み失敗が発生します。オフライン環境や厳格なセキュリティポリシーのある環境では、ローカルに保存して利用する選択も検討してください。

まとめと推奨される使用シーン

概要

Swiper.jsはCDN経由で手軽に使えます。読み込みタグを追加するだけで動きますので、プロトタイプ作成や学習、短期間で動作確認したいときに非常に便利です。一方で、規模の大きいアプリやフレームワーク連携ではnpmなどで管理した方が柔軟性と保守性が高まります。

npmを選ぶべき場面

大規模プロジェクトや複数人開発：依存管理やバンドル統制が必要です。
フレームワーク（React/Vue/Angular）と統合する場合：ビルドに合わせた最適化が可能です。

運用上の注意と簡単なヒント

CDNを使うと更新やキャッシュの影響を受けます。バージョンは明示的に固定してください。
オフライン開発やビルド工程がある場合はnpm導入を検討してください。
セキュリティやCSP（コンテンツセキュリティポリシー）を採用する際はCDNの使用を確認してください。

用途に応じてCDNとnpmを使い分けると、開発効率と保守性の両方を両立できます。

よかったらシェアしてね！

URLをコピーしました！

この記事を書いた人

user