CONTENTS
  1. HOME
  2. JavaScript
  3. JavaScript応用
  4. JavaScriptの本格的なスライドショー（Swiper.js）

JavaScriptの本格的なスライドショー（Swiper.js）

JavaScriptライブラリ「Swiper.js」のCDNを使うことで、本格的なスライドショー自動再生・ループ・ナビゲーションボタン・ドット（ページネーション）が簡単に実装できます。

公式サイト：https://swiperjs.com/

CDNとは？

CDN（Content Delivery Network）とは、JavaScriptライブラリやCSSファイルなどの静的ファイルを世界中のサーバーに分散して配置し、ユーザーの近くのサーバーから高速に読み込める仕組みです。自分のPCにライブラリをダウンロードして設置しなくても、URLで読み込むだけで使えるのが特徴です。

ここでは、Swiper.js を CDN経由で読み込むことで、簡単に本格的なスライドショーを作成します。

基本構成

See the Pen swipejs by Yoshiko Nakamura (@Yoshiko-Nakamura) on CodePen.

HTML

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

<!-- スライダー本体 -->
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="https://picsum.photos/id/1018/1200/600" alt=""></div>
            <div class="swiper-slide"><img src="https://picsum.photos/id/1015/1200/600" alt=""></div>
            <div class="swiper-slide"><img src="https://picsum.photos/id/1016/1200/600" alt=""></div>
            <div class="swiper-slide"><img src="https://picsum.photos/id/1020/1200/600" alt=""></div>
            <div class="swiper-slide"><img src="https://picsum.photos/id/1036/1200/600" alt=""></div>
        </div>

        <!-- ページネーション（ドット） -->
        <div class="swiper-pagination"></div>

        <!-- ナビゲーションボタン -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

基本のCSS

        .swiper {
            width: 1200px;
            height: 600px;
            margin: 0 auto;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

JavaScript

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

    <script>
        const swiper = new Swiper('.swiper', {
            loop: true, // ループ設定
            autoplay: {
                delay: 3000, // 3秒ごと
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true // ドットをクリック可能に
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            }
        });
    </script>

Swiper.jsをCDNで導入

cssのCDNとJavaScriptのCDNを２箇所導入します。

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

<!-- Swiper JS（CDN） -->
<!-- Swiperは、</body>よりに記述するか、head内に配置する場合は defer が必要です。-->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

new Swiper() の基本オプション

new Swiper('.swiper', {
  loop: true,
  autoplay: { delay: 3000 }
});

CSSでカスタム（ナビゲーションの見た目調整）

  • サイズを小さく
  • 色を白に
  • 丸く＋背景をつけて視認性UP
  • 位置を中央→下に移動
.swiper-button-prev,
.swiper-button-next {
  width: 40px;
  height: 40px;
  color: #fff;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  bottom: 20px;
  top: auto;
}

JSでカスタム

  • pagination.clickable を true にする
  • スライド効果を fade に変える（希望あれば）
  • speed や effect の調整など
new Swiper('.swiper', {
  loop: true, // 無限ループ
  effect: 'fade', // ← フェード効果に変更（slide → fade）
  speed: 1000, // スライド速度（ミリ秒）デフォルトは300
  autoplay: {
    delay: 3000, // 自動再生の間隔（ミリ秒）
    disableOnInteraction: false, // ユーザー操作後も自動再開
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true, // クリック可能にする
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

よく使われる Swiper オプション一覧

基本構成

オプション名意味・役割値の例
loopスライドをループさせるかどうかtrue / false
speedスライドの切り替え速度（ミリ秒）300（初期値）、1000 など
effectスライド効果'slide', 'fade', 'cube', 'coverflow', 'flip'

自動再生（autoplay）

オプション名意味・役割値の例
autoplay.delayスライドが切り替わるまでの時間（ms）3000 など
autoplay.disableOnInteractionユーザー操作後に自動再生を止めるかfalse にすると継続再生

ページネーション（ドット）

オプション名意味・役割値の例
pagination.elドットの表示先（クラス名）'.swiper-pagination'
pagination.clickableドットをクリック可能にするかtrue

ナビゲーション（矢印）

オプション名意味・役割値の例
navigation.nextEl「次へ」ボタンの要素'.swiper-button-next'
navigation.prevEl「前へ」ボタンの要素'.swiper-button-prev'

表示設定・ループ補足

オプション名意味・役割値の例
slidesPerView一度に表示するスライド数1, 2, 'auto' など
spaceBetweenスライド間の余白（px）10, 30 など
centeredSlides現在のスライドを中央に表示true

レスポンシブ対応

breakpoints: {
  768: {
    slidesPerView: 2,
    spaceBetween: 20,
  },
  1024: {
    slidesPerView: 3,
    spaceBetween: 30,
  },
}
  • effect: 'fade' の注意点
    → slidesPerView は必ず 1 になります（複数表示不可）。
  • 複雑なレイアウトの場合は「CSSでスライド幅や高さの調整」も必要です。

詳しくは公式サイトを確認しましょう！

Swiper