Swiperのスニペット集 | Web制作でコーディングを学ぶなら宗谷ブログ

1.

この記事の目的

この記事はSwiperのスニペット集になります。

Webサイトを制作しようとすると、どこかのページやセクションでSwiperを実装することが多いです。

だったらスニペットにしてみようということでこの記事を投稿しました。

※アニメーションを確認する際はCodePenで確認することをおすすめします。

2.

Swiperを使うための準備

まずは、Swiperの公式サイトで出されているCDNからライブラリを読み込みます。

<!-- CSSの読み込み -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

<!-- JSの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

また、スワイパーの一部で Font Awesome を使用しているので、必要な方は下記のCSSの読み込みもお願いします。

<!-- Font Awesome の読み込み -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

次にベースとなるHTMLとJavaScriptを用意します。

<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 class="swiper-slide">Slide 4</div>
  </div>
</div>

const swiper = new Swiper('.swiper', {
  // 必要に応じてここに記載
});

これでSwiperを使うための準備は完了になります。

3.

前に戻る・次に進むボタンをつける

Swiperではよく実装される、前に戻る・次に進むボタンをつけるコードの紹介になります。

<div id="swiper-01" class="swiper swiper-01">
  <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 class="swiper-slide">Slide 4</div>
  </div>

　<!-- 追加コード (アイコンは Font Awesome を使用しています。) -->
  <div class="swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
  <div class="swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
  <!-- 追加コード -->

</div>

const Swiper_01 = new Swiper('#swiper-01', {

  /* 追加コード */
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  }
  /* 追加コード */

});

パラメータ解説

パラメータ	値	内容
nextEl	ー	次ページボタンのセレクタ名(クラス名など)を指定
prevEl	ー	前ページボタンのセレクタ名(クラス名など)を指定

4.

縦にスライドさせる

前に戻る・次に進むボタンをクリックしたときに、縦にスライドさせるコードの紹介になります。

<div id="swiper-02" class="swiper swiper-02">
  <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 class="swiper-slide">Slide 4</div>
  </div>
　<!-- アイコンは Font Awesome を使用しています。 -->
  <div class="swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
  <div class="swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
</div>

const Swiper_02 = new Swiper('#swiper-02', {
  /* 追加コード */ 
  direction: 'vertical',
  /* 追加コード */ 
  
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  }
});

パラメータ解説

パラメータ	値 (初期値は赤字)	内容
direction	‘horizontal’	横方向にスライドを移動させる
direction	‘vertical’	縦方向にスライドを移動させる

5.

マウスホイールでスライドを動かす

マウスホイールでスライドを動かすコードの紹介になります。

下記のスニペットでは前に戻る・次に進むボタンをあえて外し、マウスホイールの動作のみでスライドを動かせるようにしています。

<div id="swiper-03" class="swiper swiper-03">
  <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 class="swiper-slide">Slide 4</div>
  </div>
</div>

const Swiper_03 = new Swiper('#swiper-03', {
  
  /* 追加コード */
  mousewheel: {
    forceToAxis: false,
    invert: false
  },

  keyboard: true
  /* 追加コード */

});

パラメータ解説

mousewheel
パラメータ	値 (初期値は赤字)	内容
forceToAxis	true	マウスホイールの動かす方向とスライドの移動方向が同じ場合のみスライドを動かす
forceToAxis	false	マウスホイールの動かす方向とスライドの移動方向が違っていてもスライドを動かす
invert	true	マウスホイールのスクロール方向とスライドの移動方向を反転させる
invert	false	マウスホイールのスクロール方向にスライドが移動する

パラメータ	値 (初期値は赤字)	内容
keyboard	true	キーボードでスライドの操作をできるようにする
keyboard	false	キーボードではスライドの操作をできないようにする

6.

逆方向にスライドさせる

逆方向にスライドさせるコードの紹介になります。

今回はHTMLのみコードを追加します。

<!-- 追加コード dir="rtl" -->
<div id="swiper-01" class="swiper swiper-01" dir="rtl">
<!-- 追加コード -->
  <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 class="swiper-slide">Slide 4</div>
  </div>
  <!-- アイコンは Font Awesome を使用しています。 -->
  <div class="swiper-button-prev"><i class="fa-solid fa-chevron-right"></i></div>
  <div class="swiper-button-next"><i class="fa-solid fa-chevron-left"></i></div>
</div>

const Swiper_01 = new Swiper('#swiper-01', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  }
});

逆方向にスライドさせるにはHTMLに dir=”rtl” を追加します。

JavaScriptへの記載は不要です。また、縦方向にスライドする場合は機能しないので注意でしてください。

7.

ページネーションをつける

Swiperではよく実装される、ページネーションをつけるコードの紹介になります。

○　●　●　●　をクリックしてスライドが動くのを確認してみてください。

<div id="swiper-05" class="swiper swiper-05">
  <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 class="swiper-slide">Slide 4</div>
  </div>

  <!-- 追加コード -->
  <div class="swiper-pagination"></div>
  <!-- 追加コード -->
</div>

const Swiper_05 = new Swiper('#swiper-05', {

  /* 追加コード */
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  }
  /* 追加コード */

});

パラメータ解説

pagination
パラメータ	値 (初期値は赤字)	内容
el	ー	ページネーションのセレクタ名を指定
type	‘bullets’	○　●　●　●　形式
	‘fraction’	何分の何（例：1 / 4）形式
	‘progressbar’	プログレスバー形式
	‘custom’	カスタム形式
clickable	true	type: ‘bullets’ の時のみ有効。● をクリックしたらスライドを移動する
clickable	false	● をクリックしてもスライドが移動しない

8.

スクロールバーをつける

Swiperではよく実装される、スクロールバーをつけるコードの紹介になります。

スクロールバーをクリックしてスライドが動くのを確認してみてください。

<div id="swiper-06" class="swiper swiper-06">
  <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 class="swiper-slide">Slide 4</div>
  </div>
  
  <!-- 追加コード -->
  <div class="swiper-scrollbar"></div>
  <!-- 追加コード -->
</div>

const Swiper_06 = new Swiper('#swiper-06', {
  
  /* 追加コード */
  scrollbar: {
    el: '.swiper-scrollbar',
    hide: false,
    draggable: true
  }
  /* 追加コード */
  
});

パラメータ解説

scrollbar
パラメータ	値 (初期値は赤字)	内容
el	ー	スクロールバーのセレクタ名を指定
hide	true	スワイパーを操作していないときはスクロールバーを隠す
hide	false	常にスクロールバーが表示される
draggable	true	スクロールバーを直接操作してスライドを動かす
draggable	false	スクロールバーを直接操作できない (スワイプ等でスライダーを動かすことは可能)

9.

各スライドの高さに自動で合わせる

スライドの高さによって、スワイパーの高さが自動で変更されるコードの紹介になります。

前に戻る・次に進むボタンをクリックしてスワイパーの高さが自動で変更されるのを確認してみてください。

<div id="swiper-07" class="swiper swiper-07">
  <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 class="swiper-slide">Slide 4</div>
  </div>
  <!-- アイコンは Font Awesome を使用しています。 -->
  <div class="swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
  <div class="swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
  <div class="swiper-pagination"></div>
</div>

const Swiper_07 = new Swiper('#swiper-07', {
  /* 追加コード */
  autoHeight: true,
  /* 追加コード */

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },

  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  }
});

パラメータ解説

パラメータ	値 (初期値は赤字)	内容
autoHeight	true	スライドの高さに合わせてSwiperの高さを変更する
autoHeight	false	スライドの高さが変わってもSwiperの高さを変更しない

10.

最初に表示したいスライドを指定する

最初に表示したいスライドを指定するコードの紹介になります。

優先して表示したいスライドがあるときによく使います。

<div id="swiper-08" class="swiper swiper-08">
  <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 class="swiper-slide">Slide 4</div>
  </div>
  <!-- アイコンは Font Awesome を使用しています。 -->
  <div class="swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
  <div class="swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
  <div class="swiper-pagination"></div>
</div>

const Swiper_08 = new Swiper('#swiper-08', {
  /* 追加コード */
  initialSlide: 1,
  /* 追加コード */

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },

  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  }
});

パラメータ解説

パラメータ	値 (初期値は赤字)	内容
initialSlide	0以上の数値	初期表示されるスライドのインデックスを指定。(0：1枚目、1：2枚目、2：3枚目)

11.

スライドをループさせる

スライドをループさせるコードの紹介になります。

これは多くのスワイパーで使われるので知っておくと良いかもしれません。

<div id="swiper-09" class="swiper swiper-09">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide-red">Slide 1</div>
    <div class="swiper-slide slide-green">Slide 2</div>
    <div class="swiper-slide slide-aqua">Slide 3</div>
    <div class="swiper-slide slide-yellow">Slide 4</div>
  </div>
  <!-- アイコンは Font Awesome を使用しています。 -->
  <div class="swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
  <div class="swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
  <div class="swiper-pagination"></div>
</div>

const Swiper_09 = new Swiper('#swiper-09', {
  /* 追加コード */
  loop: true,
  /* 追加コード */
  
  navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},

  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  }
});

パラメータ解説

パラメータ	値 (初期値は赤字)	内容
loop	true	スライドをループさせる
loop	false	スライドをループさせない

12.

スライドを自動で動かす

スライドを自動で動かすコードの紹介になります。

こちらはトップページのメインビジュアルで使われることが多いかなと思います。

<div id="swiper-10" class="swiper swiper-10">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide-red">Slide 1</div>
    <div class="swiper-slide slide-green">Slide 2</div>
    <div class="swiper-slide slide-aqua">Slide 3</div>
    <div class="swiper-slide slide-yellow">Slide 4</div>
  </div>
  <!-- アイコンは Font Awesome を使用しています。 -->
  <div class="swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
  <div class="swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
  <div class="swiper-pagination"></div>
</div>

const Swiper_10 = new Swiper('#swiper-10', {
  loop: true,
  
  /* 追加コード */
  autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: true,
		pauseOnMouseEnter: true,
		reverseDirection: false
  },
  /* 追加コード */

  navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
  },

  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  }
});

パラメータ解説

autoplay
パラメータ	値 (初期値は赤字)	内容
delay	0以上の数値	スライドが動くまでの間隔 (3000ms = 3秒)
stopOnLastSlide	true	最後のスライドまで行ったら自動再生を停止する。 (loop: trueのときはこの設定に関わらず動き続ける)
stopOnLastSlide	false	最後のスライドまで行ったら最初のスライドに戻り、自動再生を続ける
disableOnInteraction	true	ユーザーがスライダーを操作したら、自動再生を停止する
disableOnInteraction	false	ユーザーがスライダーを操作した後も自動再生を続ける
pauseOnMouseEnter	true	スワイパーにマウスが乗っている状態なら自動再生を一時停止する
pauseOnMouseEnter	false	スワイパーにマウスが乗っていても自動再生を続ける
reverseDirection	true	最後のスライドから最初のスライドに向かって再生する
reverseDirection	false	最初のスライドから最後のスライドに向かって再生する

13.

複数のスライドを表示する

複数のスライドを表示するコードの紹介になります。

複数の情報をまとめて表示したいとき使われることが多いかなと思います。

<div id="swiper-12" class="swiper swiper-12">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide-red">Slide 1</div>
    <div class="swiper-slide slide-green">Slide 2</div>
    <div class="swiper-slide slide-aqua">Slide 3</div>
    <div class="swiper-slide slide-yellow">Slide 4</div>
    <div class="swiper-slide slide-red">Slide 5</div>
    <div class="swiper-slide slide-green">Slide 6</div>
    <div class="swiper-slide slide-aqua">Slide 7</div>
    <div class="swiper-slide slide-yellow">Slide 8</div>
  </div>
  <!-- アイコンは Font Awesome を使用しています。 -->
  <div class="swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
  <div class="swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
  <div class="swiper-pagination"></div>
</div>

const Swiper_12 = new Swiper('#swiper-12', {
  /* 追加コード */
  slidesPerView: 3,
  /* 追加コード */

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },

  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  }
});

パラメータ解説

パラメータ	値 (初期値は赤字)	内容
slidesPerView	1以上の数値または auto	スワイパーの領域に表示するスライド数を指定 (autoの場合はスライドの大きさによって決まる)

14.

1度に動かすスライド数を設定する

1度に動かすスライド数を設定するコードの紹介になります。

これは複数のスライドを表示しているときに使うと便利です。

<div id="swiper-12" class="swiper swiper-12">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide-red">Slide 1</div>
    <div class="swiper-slide slide-green">Slide 2</div>
    <div class="swiper-slide slide-aqua">Slide 3</div>
    <div class="swiper-slide slide-yellow">Slide 4</div>
    <div class="swiper-slide slide-red">Slide 5</div>
    <div class="swiper-slide slide-green">Slide 6</div>
    <div class="swiper-slide slide-aqua">Slide 7</div>
    <div class="swiper-slide slide-yellow">Slide 8</div>
    <div class="swiper-slide slide-red">Slide 9</div>
    <div class="swiper-slide slide-green">Slide 10</div>
    <div class="swiper-slide slide-aqua">Slide 11</div>
    <div class="swiper-slide slide-yellow">Slide 12</div>
  </div>
  <div class="swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
  <div class="swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
  <div class="swiper-pagination"></div>
</div>

const Swiper_12 = new Swiper('#swiper-12', {
  /* 追加コード */
  slidesPerGroup: 3,
  /* 追加コード */
  
  slidesPerView: 3,

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },

  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  }
});

パラメータ解説

パラメータ	値 (初期値は赤字)	内容
slidesPerGroup	1以上の数値	1度に動かすスライドの枚数

15.

スライドの間隔を設定する

スライドの間隔を設定するコードの紹介です。

多くのスワイパーでは左右に余白があるので知っておくと便利です。

<div id="swiper-13" class="swiper swiper-13">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide-red">Slide 1</div>
    <div class="swiper-slide slide-green">Slide 2</div>
    <div class="swiper-slide slide-aqua">Slide 3</div>
    <div class="swiper-slide slide-yellow">Slide 4</div>
    <div class="swiper-slide slide-red">Slide 5</div>
    <div class="swiper-slide slide-green">Slide 6</div>
    <div class="swiper-slide slide-aqua">Slide 7</div>
    <div class="swiper-slide slide-yellow">Slide 8</div>
  </div>
  <!-- アイコンは Font Awesome を使用しています。 -->
  <div class="swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
  <div class="swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
  <div class="swiper-pagination"></div>
</div>

const Swiper_13 = new Swiper('#swiper-13', {
  slidesPerView: 3,
  
  /* 追加コード */
  spaceBetween: 20,
  /* 追加コード */

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },

  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  }
});

パラメータ解説

パラメータ	値 (初期値は赤字)	内容
spaceBetween	1以上の数値	スライドの間隔を指定 (単位はpxとなり margin-right が自動で追加される)

16.

現在のスライドを中央に表示する

スライドを中央に表示するコードの紹介になります。

初期設定では左寄せでスライドを表示しているので、中央に表示したい方はこちらのコードを参考にしてみましょう。

<div id="swiper-14" class="swiper swiper-14">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide-red">Slide 1</div>
    <div class="swiper-slide slide-green">Slide 2</div>
    <div class="swiper-slide slide-aqua">Slide 3</div>
    <div class="swiper-slide slide-yellow">Slide 4</div>
  </div>
  <!-- アイコンは Font Awesome を使用しています。 -->
  <div class="swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
  <div class="swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
  <div class="swiper-pagination"></div>
</div>

const Swiper_14 = new Swiper('#swiper-14', {
  /* 追加コード */
  centeredSlides: true,
  /* 追加コード */
  
  slidesPerView: 3,

  navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},

  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  }
});

パラメータ解説

パラメータ	値 (初期値は赤字)	内容
centeredSlides	true	現在のスライドを中央に表示する
centeredSlides	false	現在のスライドを左端または上端に表示する

17.

レスポンシブに対応させる

レスポンシブに対応させるコードの紹介になります。

指定方法のコツは、〇〇px以上なら… といった感じで指定すると上手く行くかなと思います。

<div id="swiper-15" class="swiper swiper-15">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide-red">Slide 1</div>
    <div class="swiper-slide slide-green">Slide 2</div>
    <div class="swiper-slide slide-aqua">Slide 3</div>
    <div class="swiper-slide slide-yellow">Slide 4</div>
    <div class="swiper-slide slide-red">Slide 5</div>
    <div class="swiper-slide slide-green">Slide 6</div>
    <div class="swiper-slide slide-aqua">Slide 7</div>
    <div class="swiper-slide slide-yellow">Slide 8</div>
    <div class="swiper-slide slide-red">Slide 9</div>
    <div class="swiper-slide slide-green">Slide 10</div>
    <div class="swiper-slide slide-aqua">Slide 11</div>
    <div class="swiper-slide slide-yellow">Slide 12</div>
  </div>
  <!-- アイコンは Font Awesome を使用しています。 -->
  <div class="swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
  <div class="swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
  <div class="swiper-pagination"></div>
</div>

const Swiper_15 = new Swiper('#swiper-15', {
  slidesPerView: 1,
  slidesPerGroup: 1,

  breakpoints: {
    500: {
      slidesPerView: 2,
      slidesPerGroup: 2,
    },
    768: {
      slidesPerView: 3,
      slidesPerGroup: 3,
    },
    1024: {
      slidesPerView: 4,
      slidesPerGroup: 4,
    }
  },

  navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},

  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  }
});

パラメータ解説

パラメータ	値 (初期値は赤字)	内容
breakpoints	1以上の数値	画面の横幅のサイズを指定し、{　} 内にパラメータを記載する

レスポンシブの内容

画面の横幅	内容
0 ~ 499px	表示するスライド数：1、移動するスライド数：1
500 ~ 767px	表示するスライド数：2、移動するスライド数：2
768 ~ 1023px	表示するスライド数：3、移動するスライド数：3
1024px以上	表示するスライド数：4、移動するスライド数：4

18.

最後に

Swiperのバージョンアップデートに合わせて、これからもスニペットを追加していきます。

良かったらこの記事をブクマしていただけると幸いです。

最後までこの記事を閲覧していただきありがとうございます。