スライダーswiperの使い方、swiperオプション

swiperの使い方とオプション一覧

今回は、Web開発者に人気のスライダープラグイン「Swiper」について解説します。Swiperの概要から基本的な使い方、実際の実装例、豊富なオプションの一覧まで、これ一つでSwiperの基本をマスターできる内容となっています。

Swiperの使い方

CDNを利用する場合

準備としては、swiper公式サイトから、最新のCDNライブラリを読み込みます。

2024年5月時点でのswiper最新CDNはこちらです

<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>

相対パスでライブラリを読み込む場合

上記CDNページより、ファイルをダウンロードしてから、読み込んであげてください。

基本的なHTML構造

swiperスライドを実装するシンプルな構成は下記のコードです。

<div class="swiper-container">
  <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>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Navigation -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <!-- Add Scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

  var swiper = new Swiper('.swiper-container', {
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
      hide: true,
    },
  });
  .swiper-container {
    width: 100%;
    height: 100%;
  }

Swiperを使用した色々な実装デモ

レスポンシブスライダーの作成

異なるデバイスサイズに対応したレスポンシブスライダーを作成する方法を紹介します。

var swiper = new Swiper('.swiper-container', {
  breakpoints: {
    640: {
      slidesPerView: 1,
      spaceBetween: 10,
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    1024: {
      slidesPerView: 3,
      spaceBetween: 30,
    },
  }
});

カスタムナビゲーションボタン

独自のデザインを適用したナビゲーションボタンの設定例を紹介します。

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

<script>
  var swiper = new Swiper('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>

サムネイル付きスライダー

メインスライダーとサムネイルスライダーをリンクさせた例を紹介します。

var galleryThumbs = new Swiper('.gallery-thumbs', {
  slidesPerView: 4,
  freeMode: true,
  watchSlidesVisibility: true,
  watchSlidesProgress: true,
});

var galleryTop = new Swiper('.gallery-top', {
  spaceBetween: 10,
  thumbs: {
    swiper: galleryThumbs,
  },
});

自動再生(オートプレイ)とループ機能

スライダーの自動再生機能の設定例を紹介します。

var swiper = new Swiper('.swiper-container', {
  loop: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
});

Swiperオプション一覧表

オプション説明デフォルト値設定例
initialSlide初期スライドのインデックス0initialSlide: 1
directionスライドの方向horizontaldirection: 'vertical'
speedスライドのトランジションスピード(ミリ秒)300speed: 500
autoplay自動再生機能の設定falseautoplay: { delay: 2500, disableOnInteraction: false }
loopスライダーのループ機能を有効にするfalseloop: true
paginationページネーションの設定nullpagination: { el: ‘.swiper-pagination’, clickable: true }
navigationナビゲーションボタンの設定nullnavigation: { nextEl: ‘.swiper-button-next’, prevEl: ‘.swiper-button-prev’ }
scrollbarスクロールバーの設定nullscrollbar: { el: ‘.swiper-scrollbar’, hide: true }
slidesPerView一度に表示するスライドの数1slidesPerView: 3
spaceBetweenスライド間のスペース(ピクセル)0spaceBetween: 30
breakpointsレスポンシブデザインのブレークポイント{}breakpoints: { 640: { slidesPerView: 1, spaceBetween: 10 }, 768: { slidesPerView: 2, spaceBetween: 20 }, 1024: { slidesPerView: 3, spaceBetween: 30 } }
effectスライドのエフェクトslideeffect: 'fade'
grabCursorグラブカーソルを表示するかfalseeffect: 'fade'
freeModeフリーモード(スライドがスナップされず、自由にスクロールできるモード)falsefreeMode: true
watchSlidesVisibilityスライドの可視性を監視するかfalsewatchSlidesVisibility: true
watchSlidesProgressスライドの進行状況を監視するかfalsewatchSlidesProgress: true
thumbsサムネイルスライダーの設定{}thumbs: { swiper: galleryThumbs }

まとめ

Swiperは、その使いやすさと高機能性から、多くのWeb開発者にとって欠かせないツールとなっています。この記事で紹介した基本的な使い方や実装例、豊富なオプションを参考に、ぜひあなたのプロジェクトでもSwiperを活用してみてください。さらに詳しい情報や詳細なドキュメントについては、公式サイトをチェックしてください。

公式ドキュメント: Swiper API Documentation