🎨 Swiper デモページ - 2026年最新版完全ガイド

デモ1：基本的なスライダー（ループ + 自動再生 + ページネーション）

実装内容：ループ再生、自動再生（3秒間隔）、クリック可能なページネーション、前へ・次へボタン

スライド 1

スライド 2

スライド 3

スライド 4

スライド 5

const swiperBasic = new Swiper('.swiper-basic', {
  loop: true,
  speed: 600,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

デモ2：複数枚表示 + レスポンシブ対応

実装内容：PC=3枚、タブレット=2枚、スマホ=1枚を表示（ブラウザ幅を変えて確認してください）

カード 1

カード 2

カード 3

カード 4

カード 5

カード 6

const swiperMultiple = new Swiper('.swiper-multiple', {
  slidesPerView: 1,
  spaceBetween: 20,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  breakpoints: {
    768: {
      slidesPerView: 2,
      spaceBetween: 30,
    },
    1024: {
      slidesPerView: 3,
      spaceBetween: 40,
    },
  },
});

デモ3：フェード切り替え

実装内容：スライドではなくフェードイン・アウトで切り替わります

フェード 1

フェード 2

フェード 3

const swiperFade = new Swiper('.swiper-fade', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true,
  },
  loop: true,
  autoplay: {
    delay: 4000,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

デモ4：縦方向スライド

実装内容：縦にスクロールするスライドショー（上下ボタンで操作可能）

縦スライド 1

縦スライド 2

縦スライド 3

縦スライド 4

const swiperVertical = new Swiper('.swiper-vertical', {
  direction: 'vertical',
  loop: true,
  autoplay: {
    delay: 2500,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

デモ5：サムネイル付きスライダー

実装内容：メインスライドとサムネイルが連動（サムネイルをクリックで移動可能）

メイン画像 1

メイン画像 2

メイン画像 3

メイン画像 4

サムネ 1

サムネ 2

サムネ 3

サムネ 4

// サムネイルスライダーを先に初期化
const swiperThumbs = new Swiper('.swiper-thumbs-demo', {
  slidesPerView: 4,
  spaceBetween: 10,
  watchSlidesProgress: true,
});

// メインスライダーで連動
const swiperMainThumbs = new Swiper('.swiper-main-thumbs', {
  thumbs: {
    swiper: swiperThumbs,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

🎉 すべてのデモが動作していますか？

このページは記事「【2026年最新版】Swiperの使い方完全ガイド」の実装例です。

実際にコードを見て、カスタマイズしてみてください！