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

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

1 Swiperの使い方
- 1.1 CDNを利用する場合
- 1.2 相対パスでライブラリを読み込む場合
2 基本的なHTML構造
3 Swiperを使用した色々な実装デモ
4 Swiperオプション一覧表
5 まとめ

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">
  <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>
</div>


  var swiper = new Swiper('.swiper', {
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });

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オプション一覧表

よく使うswiperオプションを抜粋してみました。

全オプションを確認されたい方は、swiper公式サイトをご参考いただけると幸いです。

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

まとめ

Swiperは、その使いやすさと機能性から、制作者にとって欠かせないツールとなっています。この記事で紹介した基本的な使い方や実装例、オプションを御社サイトにご活用いただけると幸いです。