BLOG ブログ

ホームページ制作
BLOG
【最新v8】Swiperの使い方・実用的なデモ15個の解説ー基礎から応用までー

【最新v8】Swiperの使い方・実用的なデモ15個の解説ー基礎から応用までー

更新日：2022/12/21

Webサイトのコーディングをするなら必修とも言えるスライダー。
スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。

まずはこちらのデモページをご覧ください。
片方だけはみ出しているスライダー、サムネイルと連動するスライダー、SPだけスライダーにする方法などなど、実際によく必要になる機能を網羅できるようなデモを厳選してご用意しました。
初心者さん向けのかなり初歩的な内容から、いろいろカスタマイズを加えた応用編まで解説していきます。

メインビジュアルの作例5つ（#11 ～ #15）については、Swiperのカスタマイズ方法だけでなく、アニメーションやデザインの参考になればと思い様々なパターンで作成してみました。
アレンジがしやすいよう、いずれもコードが複雑になりすぎない範囲（のつもり）でカスタマイズしていますので、ぜひご覧ください。

本記事では Swiper v8.1.4（記事執筆時の最新）を使用しています。
Swiper 5系からはIEはサポート対象外となっています。IE対応が必要な場合は 4系をご利用頂き、バージョンに合わせてオプションなどの書き換えを行う必要があります。

1 Swiperってどんなプラグイン？
2 Swiperの導入方法
- 2.1 01 Swiperのインストール
- 2.2 02 HTMLにスライド要素を追加
- 2.3 03 JSでスライダーの初期化を行う
- 2.4 04 CSSでデザイン調整を行う
3 基本のHTML構造・クラス名
4 Swiperのオプション一覧
- 4.1 パラメータ
- 4.2 プロパティ・メソッド
- 4.3 イベント
5 よく使うオプションを盛り込んだ初期化コードサンプル
6 #01 基本基本のスライダー
- 6.1 はみ出させたい要素があれば .swiperの外に出す
- 6.2 前へ / 次へボタンをスライドに対して上下中央揃えにする
- 6.3 ホバー効果でスライドを動かしたり、影を付けたりする場合の調整
7 #02 基本右側だけはみ出た形のスライダー
- 7.1 初期状態で右側だけコンテンツ幅からはみ出る
- 7.2 スライドの横幅を固定値（px）にする
- 7.3 前へ / 次へボタンとページネーションを横並びにする
8 #03 基本コンテンツ幅からはみ出たスライドを薄くする
- 8.1 自動再生させる
- 8.2 無限ループさせる
- 8.3 コンテンツ幅からはみ出たスライドを薄くする
9 #04 応用ブレークポイント切り替えでSPだけスライダーにする
- 9.1 ブレークポイント通過時に実行する
- 9.2 スライダーの解除↔再初期化を行う
- 9.3 スライダーが初期化されていないときのスタイル調整を行う
10 #05 応用総スライド数が slidesPerView を超える時だけスライダーにする
- 10.1 ブレークポイントと slidesPerView のセットを配列に格納
- 10.2 スライダーの解除↔再初期化を行う
- 10.3 スライダーが初期化されていないときのスタイル調整を行う
11 #06 応用ゆっくり動き続ける無限ループスライダー
- 11.1 ゆっくり動き続けるようにする
- 11.2 ユーザーがドラッグしたときのスピード調整
- 11.3 ホバーしたら他のスライドを薄くする
12 #07 基本サムネイル（スライダー）を付けて連動させる
- 12.1 2つのスライダーを連動させる
- 12.2 フェードモード時の共通調整
13 #08 応用サムネイル（非スライダー）を付けて連動
14 #09 応用スライダーの向きを交互に変える
- 14.1 スライダーの進行方向を逆にする
- 14.2 同じオプションをまとめる
15 #10 応用スライダーを入れ子にする
- 15.1 スライダーを入れ子にする
- 15.2 ページネーションの出力内容をカスタマイズする
16 #11 基本メインビジュアルフェードアニメーション
17 #12 応用始めと終わりで別々のアニメーションを付ける
18 #13 応用縦方向のスライダー
19 #14 応用スライドごとに表示時間を変えて、進捗状況と連動したプログレスバーを作成する
- 19.1 スライドごとに表示時間（delay）を変える
- 19.2 進捗状況と連動したアニメーション（プログレスバー）
20 #15 応用お手軽パララックス+スライド外のコンテンツと連動させる
- 20.1 視差効果（パララックス）を付ける
- 20.2 スライド外に独自要素を置いて連動させる
21 同じページに同じスライダーを複数設置する方法
22 まとめ

Swiperってどんなプラグイン？

公式サイト
公式デモ

はじめに、Swiperの特徴を簡単にご紹介します。

メリット

・jQuery非依存
・オプション・コールバック関数が豊富でカスタマイズ性が高い
・ドラッグ（スワイプ）したときの操作感が良い
・活発に開発されている
・利用者数が多く、日本語の参考記事も多い

SwiperはjQuery非依存なので、脱jQueryを求める方や、要件としてjQueryが使えないプロジェクトの場合はまず候補に挙がると思います。
また、オプション・コールバック関数が非常に多く用意されているのが特徴で、柔軟なカスタマイズが可能となっています。

そして個人的に気に入っているポイントが、「ドラッグ（スワイプ）したときの操作感が良い」というところ。
比較対象としてslickを挙げますが、slickで実装したスライダーにはドラッグでの移動量に制限があり、たくさんドラッグしても少ししか移動できない仕様です。
一方Swiperで実装したものは、ドラッグ量と移動量が自然に連動するストレスフリーな操作感になっています。スライド数が多い場合や、なるべくたくさん見てほしい！というときはSwiperのほうがお勧めです。

デメリット

・たくさんの機能を把握するのが大変
・容量が大きい
・公式ドキュメントが英語

多彩な機能があるため全てを把握することが難しく、「このオプション使えばもっと簡単にできた…！」とあとで気付くということもしばしば。
そして、機能が多いだけあってファイル容量も大きいです。
（jQueryを読み込まないならその分軽い、と考えることもできますが）
※Webpackでバンドルする場合は必要なモジュールだけをインポートすることができるので、容量を削減できそうです。

Swiperの導入方法

続いて基本的な導入の流れをご説明します。
公式サイトで分かりやすく説明されているので、その流れに沿って簡単にまとめました。

01 Swiperのインストール

以下の3つの方法でインストールが可能です。

NPMでインストール
CDNを利用
ファイルをダウンロードして利用

詳しくは公式サイト Get Started をご確認ください。

とりあえず手軽に試してみたい、という方はCDNかファイルをダウンロードで進めてみてください。
本記事のデモではファイルをダウンロードして利用しています。

ファイルをダウンロードする場合

Download assets に記載されているリンク先（現在は v8）からCSSとJSをダウンロードします。

CSSが2種類あるのですが、読み込むのはどちらか一方だけでOKです。
swiper-bundle.min.css のほうだと何もCSSを書かなくてもある程度スライダーの形が出来上がるので、初心者さんはこちらのほうがやりやすいと思います。ただ、その分ファイル容量は大きくなります。
swiper.min.css のほうは装飾なしで必要最低限のスタイルのみになっているので、オリジナルデザインで実装するならこちらのほうが無駄が少ないです。

※本記事デモでは swiper.min.css を使用しています。

ダウンロードしたファイルをHTMLで読み込む

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Swiper DEMO</title>

<link rel="stylesheet" href="path/swiper.min.css" />
</head>

<body>
CONTENTS

<script src="path/swiper-bundle.min.js"></script>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Swiper DEMO</title>

</head>

<body>

CONTENTS

</body>

</html>

02 HTMLにスライド要素を追加

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

<div class="swiper-slide">Slide 1</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 3</div>

...

</div>

</div>

こちらが基本の作りです。
.swiper .swiper-wrapper .swiper-slide の3つは必須です。
.swiper-wrapper と .swiper-slide の間に他の要素を割り込ませたりするとうまく動かなくなるのでご注意ください。

その他の要素は必要なときだけ追加しましょう。
.swiper の中には他の独自コンテンツを追加しても大丈夫です。

それぞれの役割については次の基本のHTML構造・クラス名で説明しています。

03 JSでスライダーの初期化を行う

const mySwiper = new Swiper('.swiper', {
  // Optional parameters
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

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

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

const mySwiper = new Swiper('.swiper', {

// Optional parameters

loop: true,

// If we need pagination

pagination: {

el: '.swiper-pagination',

// Navigation arrows

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

// And if we need scrollbar

scrollbar: {

el: '.swiper-scrollbar',

});

JSにて上記のようにスライダーの初期化を行います。
ここまで行うとスライダーが動き出します！

下でよく使うオプションを盛り込んだ初期化コードサンプルもご紹介していますのでご活用ください。

04 CSSでデザイン調整を行う

最後にCSSでデザインの調整をしたら実装完了となります。
本記事デモと同じ swiper.min.css を利用している場合、初期化しただけの状態だとページネーションなどが表示されません。
「上手く動いていないのかな？」と思う方もいるかもしれませんが、落ち着いてソースを確認し、生成されている要素に対してスタイルを当てていきましょう。

基本のHTML構造・クラス名

デザインやアニメーションをカスタマイズするときのために、基本構造をざっくり把握しておきましょう。
各クラス名はパラメータで指定すれば任意のクラス名に変えることもできますが、本記事では全てデフォルトのままという前提で説明しています。

.swiper	スライダー全体を囲むコンテナ（※バージョン6以前では .swiper-container ）。このエリア内にスライド要素が収まる形。はみ出させたい場合は overflow: visible; で上書きします。
.swiper-wrapper	.swiper-slide（各スライド）を囲む要素。これを transform で移動させることでスライダーの動きを実現しています。 .swiper-wrapper の直下には .swiper-slide だけを入れます。
.swiper-slide	この中に各スライドの要素を入れます。デザインを調整する際、.swiper-slide に直接スタイルを当てると不具合に繋がる場合があるので要注意。以下のように中身を囲う要素を作って、それに対してスタイルを当てるのがお勧めです。 <div class="swiper-slide"> <div class="item"> <img src="img.jpg" alt=""> <p class="text">テキストが入ります</p> </div> </div>
.swiper-pagination	ページネーション
.swiper-button-prev \| .swiper-button-next	前へ / 次へボタン
.swiper-button-disabled	前のスライド / 次のスライドがないときに付くクラス名
.swiper-scrollbar	スクロールバー

.swiper > .swiper-wrapper > .swiper-slide の構造は守る必要があります。
.swiper-wrapper と .swiper-slide の間に他の要素を割り込ませたりするとうまく動かなくなるのでご注意ください。
それ以外の制限はあまりなく、ページネーション、前へ / 次へボタン、スクロールバーは .swiper の外に出しても問題なく動作します。

.swiper-slide-active	アクティブなスライドに付くクラス名。ループモード時は状況によって .swiper-slide-duplicate-active が付く。
.swiper-slide-prev	アクティブなスライドの前のスライドに付くクラス名。ループモード時は状況によって .swiper-slide-duplicate-prev が付く。
.swiper-slide-next	アクティブなスライドの次のスライドに付くクラス名。ループモード時は状況によって .swiper-slide-duplicate-next が付く。
.swiper-slide-visible	※ watchSlidesProgress: true のときのみ表示状態のスライドに付くクラス名。
.swiper-slide-duplicate	ループモード時に複製されたスライドに付くクラス名。

こちらは現在のスライドの状況に応じて動的に追加されるクラス名です。
デザインやアニメーションのカスタマイズにはこのクラスを利用していきます。

ループモード時は「-duplicate」が間に入った別のクラスになる場合があるのでご注意ください。
詳しくはループモード時の注意で説明しています。

Swiperのオプション一覧

本記事で使用しているものを中心に、よく使うオプションをまとめました。
先にこれだけ読んでもよく分からないと思いますので、まずはデモを見てから、使用されているオプションを確認しに来て頂ければと思います。

パラメータ

公式サイトの一覧はこちら：Parameters

パラメータ	タイプ	デフォルト値	説明
allowTouchMove	boolean	true	false：ドラッグ（スワイプ）でのスライド切り替えを無効にする。
autoplay	boolean \| AutoplayOptions
{
delay	boolean	3000	次のスライドに切り替わるまでの時間を指定（ミリ秒）。 data-swiper-autoplay 属性を利用して、HTML側で個別に値を指定することも可能。
disableOnInteraction	boolean	true	true：ユーザーが操作したときに自動再生を止める。 false にしておくのがお勧め。
reverseDirection	boolean	false	自動再生の進行方向を逆にする。
waitForTransition	boolean	true	true：スライド切り替えのアニメーションの間は自動再生を止める。 true だと1枚目のスライドだけ表示時間が短くなるため、表示時間を揃えたいなら false にするのがお勧め。
}
breakpoints	object		ブレークポイントごとにパラメータを変更する。＜例＞ breakpoints: { // when window width is >= 320px 320: { slidesPerView: 2, spaceBetween: 20 }, // when window width is >= 640px 640: { slidesPerView: 4, spaceBetween: 40 } }
centeredSlides	boolean	false	true：アクティブなスライドが中央に来るようにする。
direction	‘horizontal’ \| ‘vertical’	‘horizontal’	‘vertical’：スライド方向を垂直方向にする。
effect	‘slide’ \| ‘fade’ \| ‘cube’ \| ‘coverflow’ \| ‘flip’ \| ‘creative’ \| ‘cards’	‘slide’	エフェクトのタイプを指定。詳しくは公式のデモをご覧ください。
fadeEffect	FadeEffectOptions		※ effect: ‘fade’ のときのみ
{
crossFade	boolean	false	true：スライドのクロスフェードを有効にする。下のコンテンツが重なって出てしまわないように true がお勧め。
}
followFinger	boolean	true	true：ドラッグ（スワイプ）と連動してスライダーが動き、前後のスライドが見えてくるようにする。 false：ドラッグ（スワイプ）中はスライダーを動かさない。アクティブなスライドにCSSアニメーションを適用するケースなどでは false のほうがお勧め。
freeMode	boolean \| FreeModeOptions	false	true：自由にドラッグ（スワイプ）できるようにする。スライド位置がスナップしなくなる。下の詳細設定が必要なければ freeMode: true だけでOK。
{
enabled	boolean		true：自由にドラッグ（スワイプ）できるようにする。スライド位置がスナップしなくなる。
momentum	boolean	true	false：ドラッグ（スワイプ）した後の慣性スクロールをオフにする。
}
grabCursor	boolean	false	true：PCでホバー時にマウスカーソルを「掴む」マークにする。
loop	boolean	false	true：無限ループさせる。
loopAdditionalSlides	number	0	※ loop: true のときのみ複製するスライド数を指定。0 だとループが滑らかに繋がらないことがあるため 1 以上がお勧め。
mousewheel	boolean \| MousewheelOptions		true：マウスホイールによるスライド切り替えを有効にする。下の詳細設定が必要なければ mousewheel: true だけでOK。
{
forceToAxis	boolean	false	true：スライド方向とスクロール方向が一致しているときだけ有効にする。水平方向のスライダーなら水平方向のスクロールのみ、垂直方向のスライダーなら垂直方向のスクロールのみ可能となる。
invert	boolean	false	true：スクロール方向とスライドの動く向きを逆にする。
}
nested	boolean	false	true：スライダーを入れ子にしているときにタッチイベントを正しく取得する。親子のスライド方向が同じ場合のみ使用。
pagination	boolean \| PaginationOptions
{
clickable	boolean	false	true：クリックでのスライド切り替えを有効にする。押せそうなデザインなら true にしておくのがお勧め。
type	‘bullets’ \| ‘fraction’ \| ‘progressbar’ \| ‘custom’	‘bullets’	表示タイプを指定。 ‘bullets’：スライド枚数分のドットが作られる。 ‘fraction’：分数で表示する（例：1 / 10）。 ‘progressbar’：スライドの進捗に応じてバーが伸びていく。 ‘custom’：出力内容をカスタマイズ。renderCustom で書式設定が必要。
renderBullet	function(index, className)		※ type: ‘bullets’ のときのみ出力内容を指定。＜ 01、02…とスライド番号を入れたい場合の例＞ renderBullet: (index, className) => { let num = ('00' + (index + 1)).slice(-2); return '' + num + ''; },
renderCustom	function(swiper, current, total)		※ type: ‘custom’ のときのみ出力内容を指定。
}
roundLengths	boolean	false	true：スライドの横幅・高さの小数点以下を四捨五入して、中の画像や文字がぼやけないようにする。
slideToClickedSlide	boolean	false	true：クリックしたスライドに移動させる（アクティブにする）。
slidesPerView	number \| ‘auto’	1	表示させるスライドの枚数を指定。指定した枚数分がコンテナ内に収まるように調整される。小数点以下の値も指定可能（ 1.5 など）。 CSSでサイズ調整したい場合は ‘auto’ を指定。
spaceBetween	number	0	スライド間の余白を指定（px）。 CSSで margin を付けるとスライドの位置がずれていくことがあるため、こちらで指定するのが推奨。
speed	number	300	スライド切り替えのアニメーションのスピードを指定（ミリ秒）。
thumbs	ThumbsOptions
{
swiper	Swiper	null	サムネイルのスライダーと連動させる場合、サムネイルのスライダーのSwiperインスタンス名を指定。
}
watchSlidesProgress	boolean	false	true：各スライドの進捗状況を監視する。表示状態のスライドに .swiper-slide-visible のクラスが付くようになる。

プロパティ・メソッド

公式サイトの一覧はこちら：Methods & Properties

プロパティ

プロパティ	説明
swiper.activeIndex	アクティブなスライドのインデックス番号を取得。
swiper.realIndex	アクティブなスライドのインデックス番号を取得。 ※ループモードの場合は .activeIndex ではなくこちらを使用
swiper.params	初期化時のパラメータの値を取得。例：mySwiper.params.speed

メソッド

メソッド	説明
swiper.destroy(deleteInstance, cleanStyles)	スライダーを無効化する。 deleteInstance：インスタンスを削除するかどうか（boolean）｜デフォルトは true cleanStyles：スライダー要素の不要なスタイルを削除するかどうか（boolean）｜デフォルトは true
swiper.getTranslate()	スライダーの現在の translate の値を取得。
swiper.setTranslate(translate)	スライダーの translate の値を書き換える。
swiper.slideTo(index, speed, runCallbacks)	指定したインデックス番号のスライドへ移動。
swiper.slideToLoop(index, speed, runCallbacks)	指定したインデックス番号のスライドへ移動。 ※ループモードの場合は slideTo() ではなくこちらを使用

イベント

公式サイトの一覧はこちら：Events

スライド切り替え

似たような項目が多くてタイミングが分かりにくいので、自動再生をオンにしているときの発火する順でまとめてみました。スライド切り替えのたびに繰り返しこの順番で発火します。
このタイミングの差を利用すれば、思い通りのアニメーションを実装しやすいと思います。
※ユーザー操作によりスライドを切り替えたときや、フェードモードとスライドモードでは挙動に細かな違いが出ます。

発火順	イベント名	タイミング
1	setTransition	アニメーションを開始するたび
2	setTranslate	.swiper-wrapper の位置（translate）が変わるたび
3	activeIndexChange \| realIndexChange	スライドのインデックス番号が変わるとき ※ realIndexChange はループモード用
4	slideChange	アクティブなスライドが変わるとき
5	beforeTransitionStart	アニメーション開始前
6	transitionStart	アニメーション開始時
7	slideChangeTransitionStart	スライド切り替えのアニメーション開始時
8	setTransition	（1と同じ）
9	transitionEnd	アニメーション終了後
10	slideChangeTransitionEnd	スライド切り替えのアニメーション終了後

初期化

発火順	イベント名	タイミング
1	beforeInit	初期化直前
自動再生を有効にしている場合はここで上記「スライド切り替え」の1～10が発火
2	init	Swiperの初期化直後
3	afterInit	初期化直後

操作

イベント名	タイミング
beforeResize	resize ハンドラの前
touchEnd	クリック後または指が離れたとき

よく使うオプションを盛り込んだ初期化コードサンプル

前章のまとめとして、使用頻度が高いと思われるパラメータを一通り盛り込んだコードをご用意してみました！
実装の際にご活用頂ければと思います。

const mySwiper = new Swiper('.swiper', {
  effect: 'fade', // フェードモードにする（デフォルトは 'slide'）
  fadeEffect: {
    crossFade: true, // クロスフェードを有効にする（フェードモードの場合 true 推奨）
  },

  slidesPerView: 1, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
  spaceBetween: 0, // スライド間の余白（px）
  centeredSlides: true, // アクティブなスライドを中央に配置する

  loop: true,  // 無限ループさせる
  loopAdditionalSlides: 1, // 無限ループさせる場合に複製するスライド数

  speed: 300, // スライドアニメーションのスピード（ミリ秒）

  autoplay: { // 自動再生させる
    delay: 3000, // 次のスライドに切り替わるまでの時間（ミリ秒）
    disableOnInteraction: false, // ユーザーが操作しても自動再生を止めない
    waitForTransition: false, // アニメーションの間も自動再生を止めない（最初のスライドの表示時間を揃えたいときに）
  },

  grabCursor: true, // PCでマウスカーソルを「掴む」マークにする
  watchSlidesProgress: true, // スライドの進行状況を監視する

  pagination: {
    el: '.swiper-pagination', // ページネーション要素のクラス
    clickable: true, // クリックによるスライド切り替えを有効にする
    type: 'bullets' // 'bullets'（デフォルト） | 'fraction' | 'progressbar'
  },

  navigation: {
    nextEl: '.swiper-button-next', // 「次へ」ボタン要素のクラス
    prevEl: '.swiper-button-prev', // 「前へ」ボタン要素のクラス
  },

  scrollbar: {
    el: '.swiper-scrollbar', // スクロールバー要素のクラス
  },

  thumbs {
    swiper: mySwiper2 // サムネイルのスライダーのインスタンス名
  },

  breakpoints: { // ブレークポイント
    600: { // 画面幅600px以上で適用
      slidesPerView: 2,
    },
      1025: { // 画面幅1025px以上で適用
      slidesPerView: 4,
      spaceBetween: 32,
    }
  },

  on: { // イベントを登録する
    slideChange: (swiper) => {
      console.log('Slide index changed to: ' + (swiper.realIndex + 1));
    },
  },
});

const mySwiper = new Swiper('.swiper', {

effect: 'fade', // フェードモードにする（デフォルトは 'slide'）

fadeEffect: {

crossFade: true, // クロスフェードを有効にする（フェードモードの場合 true 推奨）

slidesPerView: 1, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）

spaceBetween: 0, // スライド間の余白（px）

centeredSlides: true, // アクティブなスライドを中央に配置する

loop: true, // 無限ループさせる

loopAdditionalSlides: 1, // 無限ループさせる場合に複製するスライド数

speed: 300, // スライドアニメーションのスピード（ミリ秒）

autoplay: { // 自動再生させる

delay: 3000, // 次のスライドに切り替わるまでの時間（ミリ秒）

disableOnInteraction: false, // ユーザーが操作しても自動再生を止めない

waitForTransition: false, // アニメーションの間も自動再生を止めない（最初のスライドの表示時間を揃えたいときに）

grabCursor: true, // PCでマウスカーソルを「掴む」マークにする

watchSlidesProgress: true, // スライドの進行状況を監視する

pagination: {

el: '.swiper-pagination', // ページネーション要素のクラス

clickable: true, // クリックによるスライド切り替えを有効にする

type: 'bullets' // 'bullets'（デフォルト） | 'fraction' | 'progressbar'

navigation: {

nextEl: '.swiper-button-next', // 「次へ」ボタン要素のクラス

prevEl: '.swiper-button-prev', // 「前へ」ボタン要素のクラス

scrollbar: {

el: '.swiper-scrollbar', // スクロールバー要素のクラス

thumbs {

swiper: mySwiper2 // サムネイルのスライダーのインスタンス名

breakpoints: { // ブレークポイント

600: { // 画面幅600px以上で適用

slidesPerView: 2,

1025: { // 画面幅1025px以上で適用

slidesPerView: 4,

spaceBetween: 32,

}

on: { // イベントを登録する

slideChange: (swiper) => {

console.log('Slide index changed to: ' + (swiper.realIndex + 1));

});

#01 基本基本のスライダー

プレビュー
ソースを見る

それではここから本題のデモの解説に入っていきます。
まずは最もよく見るタイプのごく普通のスライダーから。

前へ / 次へボタンだけがコンテンツ幅の外に出ているデザインって頻出ですよね。
よく見るタイプでありながら少し調整しにくいところもあるので、初心者さん向けにポイントとして挙げました。

デモのポイント

はみ出させたい要素があれば .swiper の外に出す
前へ / 次へボタンをスライドに対して上下中央揃えにする
ホバー効果でスライドを動かしたり、影を付けたりする場合の調整

const mySwiper = new Swiper('.card01 .swiper', {
  slidesPerView: 1,
  spaceBetween: 24,
  grabCursor: true,
  pagination: {
    el: '.card01 .swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.card01 .swiper-button-next',
    prevEl: '.card01 .swiper-button-prev',
  },
  breakpoints: {
    600: {
      slidesPerView: 2,
    },
    1025: {
      slidesPerView: 4,
      spaceBetween: 32,
    }
  },
});

const mySwiper = new Swiper('.card01 .swiper', {

slidesPerView: 1,

spaceBetween: 24,

grabCursor: true,

pagination: {

el: '.card01 .swiper-pagination',

clickable: true,

navigation: {

nextEl: '.card01 .swiper-button-next',

prevEl: '.card01 .swiper-button-prev',

breakpoints: {

600: {

slidesPerView: 2,

1025: {

slidesPerView: 4,

spaceBetween: 32,

}

});

<div class="card01 l-section">
  <div class="l-inner">

    <div class="swiper-area">
      <div class="swiper">
        <div class="swiper-wrapper">
          <a href="#" class="swiper-slide">
            <article class="slide">
              <div class="slide-media img-cover"><img src="https://picsum.photos/id/139/800/500" alt=""></div>
              <div class="slide-content">
                <time class="slide-date" datetime="2021-12-01">2021.12.01</time>
                <h2 class="slide-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
              </div>
            </article>
          </a>
          ⋮
          <a href="#" class="swiper-slide">
            <article class="slide">
              <div class="slide-media img-cover"><img src="https://picsum.photos/id/127/800/500" alt=""></div>
              <div class="slide-content">
                <time class="slide-date" datetime="2021-12-01">2021.12.01</time>
                <h2 class="slide-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
              </div>
            </article>
          </a>
        </div><!-- /swiper-wrapper -->
      </div><!-- /swiper -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div><!-- /swiper-area -->
    <div class="swiper-pagination"></div>

  </div>
</div>

<h2 class="slide-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

</div>

</article>

</a>

⋮

<h2 class="slide-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

</div>

</article>

</a>

</div>

</div>

</div>

</div>

はみ出させたい要素があれば .swiperの外に出す

前へ / 次へボタンをコンテンツ幅からはみ出させようとすると、.swiper に overflow: hidden; がかかっているため上手くいきません。
そういうときは .swiper の外に出してしまうのが一番簡単です。
position 調整のための親要素（ここでは .swiper-area ）で囲っておき、.swiper-button-prev と .swiper-button-next を .swiper の外に出してしまえばシンプルに解決できます。

前へ / 次へボタンをスライドに対して上下中央揃えにする

前へ / 次へボタンはスライドの高さに対して上下中央揃えのデザインになっていることが多いと思います。
ですが、ページネーションがあるとその分の高さも含まれてしまいボタンの位置がずれてしまいます。
この場合でも .swiper の外に出してしまうのが早いです。
前へ / 次へボタンがいる階層よりも外に .swiper-pagination を出してしまえばOK。

ホバー効果でスライドを動かしたり、影を付けたりする場合の調整

スライドに影を付けていたり、ホバー効果でスライドの位置を動かしたりしている場合、そのままだと .swiper に overflow: hidden; がかかっているので切れてしまいます。
なので、はみ出させたい分だけ .swiper に padding を付けておくようにします。
本記事のデモでは、ホバー時にスライドを上に 16px 動かす効果を付けているので、.swiper に padding-top: 16px を付けています。

#02 基本右側だけはみ出た形のスライダー

プレビュー
ソースを見る

こちらもよく見るタイプのスライダー。
「スライダーの左端がコンテンツ幅に揃っていて、かつ右側だけはみ出ている」というデザインです。
また、デモ01では slidesPerView でスライドの横幅を制御していましたが、こちらではCSSのほうで固定値を指定するパターンをご紹介しています。

デモのポイント

初期状態で右側だけコンテンツ幅からはみ出る
スライドの横幅を固定値（px）にする
前へ / 次へボタンとページネーションを横並びにする

const mySwiper = new Swiper('.card02 .swiper', {
  slidesPerView: 'auto',
  spaceBetween: 16,
  grabCursor: true,
  pagination: {
    el: '.card02 .swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.card02 .swiper-button-next',
    prevEl: '.card02 .swiper-button-prev',
  },
  breakpoints: {
    1025: {
      spaceBetween: 32,
    }
  },
});

const mySwiper = new Swiper('.card02 .swiper', {

slidesPerView: 'auto',

spaceBetween: 16,

grabCursor: true,

pagination: {

el: '.card02 .swiper-pagination',

clickable: true,

navigation: {

nextEl: '.card02 .swiper-button-next',

prevEl: '.card02 .swiper-button-prev',

breakpoints: {

1025: {

spaceBetween: 32,

}

});

<div class="card02 l-section">
  <div class="l-inner">

    <div class="swiper">
      <div class="swiper-wrapper">
        <a href="#" class="swiper-slide">
          <article class="slide">
            <div class="slide-media img-cover"><img src="https://picsum.photos/id/139/800/500" alt=""></div>
            <div class="slide-content">
              <time class="slide-date" datetime="2021-12-01">2021.12.01</time>
              <h2 class="slide-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
            </div>
          </article>
        </a>
        ⋮
        <a href="#" class="swiper-slide">
          <article class="slide">
            <div class="slide-media img-cover"><img src="https://picsum.photos/id/127/800/500" alt=""></div>
            <div class="slide-content">
              <time class="slide-date" datetime="2021-12-01">2021.12.01</time>
              <h2 class="slide-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
            </div>
          </article>
        </a>
      </div><!-- /swiper-wrapper -->

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

  </div>
</div>

<h2 class="slide-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

</div>

</article>

</a>

⋮

<h2 class="slide-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

</div>

</article>

</a>

</div>

</div>

</div>

</div>

初期状態で右側だけコンテンツ幅からはみ出る

左だけ余白が付いていればいいから横幅は100%にして margin-left を付けて…のような調整をし始めると、あまり上手くいきません。
「基準位置はコンテンツ幅にしつつ、そこからはみ出させたい」ときは、.swiper にかかっている overflow: hidden; を visible で上書きしましょう。そして代わりに親要素のほうに overflow: hidden; をかけておくようにします。

.card02 {
  overflow: hidden; // 2.代わりに親要素で hidden にする
  .swiper {
    overflow: visible; // 1.はみ出させるように visible で上書き
  }
}

.card02 {

overflow: hidden; // 2.代わりに親要素で hidden にする

.swiper {

overflow: visible; // 1.はみ出させるように visible で上書き

}

スライドの横幅を固定値（px）にする

slidesPerView でスライド数を指定すると、コンテナのサイズに応じてスライドのサイズも動的に変わる形になります。
そうではなく「どの画面幅でも常に○pxにしたい」という場合は、slidesPerView: ‘auto’ を指定することで、CSSでのサイズ調整が可能になります。

const mySwiper = new Swiper('.card02 .swiper', {
  slidesPerView: 'auto',
  ⋮
});

const mySwiper = new Swiper('.card02 .swiper', {

slidesPerView: 'auto',

⋮

});

.card02 {
  .swiper-slide {
    width: 36rem;
  }
}

.card02 {

.swiper-slide {

width: 36rem;

}

前へ / 次へボタンとページネーションを横並びにする

前へ / 次へボタンやページネーションのHTML構造は自由に変えられるので、横並びにしたければこの2つを囲う div（ここでは .swiper-controller ）を追加しましょう。
あとはCSSで flex をかけるなど適宜調整するだけ。

<div class="swiper">
  <div class="swiper-wrapper">
    ⋮
  </div><!-- /swiper-wrapper -->
  <div class="swiper-controller">
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div><!-- /swiper -->

⋮

</div>

</div>

</div>

.card02 {
  .swiper-controller {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 3.2rem;
  }
  .swiper-pagination {
    margin-right: auto;
  }
}

.card02 {

.swiper-controller {

display: flex;

gap: 1.6rem;

align-items: center;

justify-content: flex-end;

margin-top: 3.2rem;

}

.swiper-pagination {

margin-right: auto;

}

#03 基本コンテンツ幅からはみ出たスライドを薄くする

プレビュー
ソースを見る

デモ01をベースに、追加で3点のカスタマイズを行ったパターンです。
いずれも基本のオプションのみで簡単に実装できます。

デモのポイント

自動再生させる
無限ループさせる
コンテンツ幅からはみ出たスライドを薄くする

自動再生させる

const mySwiper = new Swiper('.card03 .swiper', {
  ⋮
  speed: 1000,
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  ⋮
});

const mySwiper = new Swiper('.card03 .swiper', {

⋮

speed: 1000,

autoplay: {

delay: 4000,

disableOnInteraction: false,

⋮

});

speed：スライドアニメーション（切り替わるときの動き）のスピードをミリ秒で指定します。
autoplay.delay：自動的に次のスライドに切り替わるまでの時間（間隔）をミリ秒で指定します。
autoplay.disableOnInteraction：false にすればユーザーがドラッグなどの操作をしても自動再生が止まらないようになります。

無限ループさせる

const mySwiper = new Swiper('.card03 .swiper', {
  ⋮
  loop: true,
  loopAdditionalSlides: 1,
  ⋮
});

const mySwiper = new Swiper('.card03 .swiper', {

⋮

loop: true,

loopAdditionalSlides: 1,

⋮

});

loop：true にするとスライダーが無限ループするようになります。
loopAdditionalSlides：ループモード時に複製するスライド数を指定します。未指定だと滑らかに繋がらないことがあるため、基本的に1以上で設定しておくのがお勧め。

ループモード時に気を付けること

ループモードにすると、最初と最後のスライドがつながるようにスライドが複製されます。
.swiper-slide の数が元々のHTMLよりも増える形になるので、JSでindexを取得して何か処理をしようとするとうまくいきません。
アクティブなスライドのインデックス番号を取りたいときは、swiper.realIndex を利用しましょう。

また、基本のHTML構造・クラス名で説明している通り、状況によって .swiper-slide-active .swiper-slide-prev .swiper-slide-next の間に「-duplicate」が入った別のクラス名が付くことがあります。
その場合はCSSを以下のように書いているとスタイルが当たりません。

.swiper-slide-active { … }
.swiper-slide-prev { … }
.swiper-slide-next { … }

このままで問題ないケースも多いのですが、後半で紹介しているメインビジュアルの作例ではアニメーションのつながりが一部おかしくなってしまいます。
そういうときは以下のように書き方を変更してみましょう。

.swiper-slide[class*=-active] { … }
.swiper-slide[class*=-prev] { … }
.swiper-slide[class*=-next] { … }

コンテンツ幅からはみ出たスライドを薄くする

const mySwiper = new Swiper('.card03 .swiper', {
  ⋮
  watchSlidesProgress: true,
  ⋮
});

const mySwiper = new Swiper('.card03 .swiper', {

⋮

watchSlidesProgress: true,

⋮

});

.card03 {
  .swiper-slide {
    &:not(.swiper-slide-visible) {
      .slide {
        pointer-events: none;
        opacity: .3;
      }
    }
  }
}

.card03 {

.swiper-slide {

&:not(.swiper-slide-visible) {

.slide {

pointer-events: none;

opacity: .3;

}

表示状態のスライド（ .swiper のエリア内にいるもの）を判定するために、watchSlidesProgress を利用します。こちらを true にすると、表示状態のスライドに .swiper-slide-visible のクラスが付くようになります。
あとはCSSで .swiper-slide-visible 以外のスライドを薄くしておきます。

#04 応用ブレークポイント切り替えでSPだけスライダーにする

プレビュー
ソースを見る

SPだけスライダーにするのでPCのときは swiper.destroy() をすればよい！ということはすぐ分かると思うのですが、きちんと「PC↔SPの切り替え時にスライダーの解除↔再初期化をする」ためには「スライダーが初期化済みかどうか」の判定を入れることがポイントです。

デモのポイント

ブレークポイント通過時に実行する
スライダーの解除↔再初期化を行う
スライダーが初期化されていないときのスタイル調整を行う

ブレークポイント通過時に実行する

const mediaQuery = window.matchMedia('(max-width: 1024px)'); // メディアクエリを登録

const checkBreakpoint = (e) => {
  if (e.matches) {
    // メディアクエリにマッチしたとき（1024px 以下）の処理
  } else if (mySwiper) {
    // メディアクエリにマッチしなかったとき（1025px 以上）の処理
  }
}

mediaQuery.addListener(checkBreakpoint); // ブレークポイント通過時に実行
checkBreakpoint(mediaQuery); // ロード時に初回実行

const mediaQuery = window.matchMedia('(max-width: 1024px)'); // メディアクエリを登録

const checkBreakpoint = (e) => {

if (e.matches) {

// メディアクエリにマッチしたとき（1024px 以下）の処理

} else if (mySwiper) {

// メディアクエリにマッチしなかったとき（1025px 以上）の処理

}

mediaQuery.addListener(checkBreakpoint); // ブレークポイント通過時に実行

checkBreakpoint(mediaQuery); // ロード時に初回実行

ブレークポイントの判定には window.matchMedia と addListener() を用い、mediaQuery に変化があったとき（ブレークポイントを通過したとき）だけ実行させるようにしています。

ただし、このコードだとブレークポイントが複数あるケースに対応できません。その場合は次のデモ #05 のほうの書き方をしてみてください。

スライダーの解除↔再初期化を行う

let mySwiper = null;

const checkBreakpoint = (e) => {
  // メディアクエリにマッチしたらスライダーを初期化
  if (e.matches) {
    initSwiper();
  } else if (mySwiper) {
    // メディアクエリにマッチせず、スライダーが初期化済みだったらスライダーを解除
    mySwiper.destroy(false, true);
  }
}

const initSwiper = () => {
  mySwiper = new Swiper('.card04 .swiper-a', {
    ⋮
  });
};

let mySwiper = null;

const checkBreakpoint = (e) => {

// メディアクエリにマッチしたらスライダーを初期化

if (e.matches) {

initSwiper();

} else if (mySwiper) {

// メディアクエリにマッチせず、スライダーが初期化済みだったらスライダーを解除

mySwiper.destroy(false, true);

}

const initSwiper = () => {

mySwiper = new Swiper('.card04 .swiper-a', {

⋮

});

};

続いて、メディアクエリにマッチしたらスライダーを初期化し、マッチしなかったらスライダーを解除する、という処理を追加します。
スライダーを解除する処理は、if (mySwiper) でスライダーが初期化済みのときだけ実行されるようにします。そのため mySwiper の初期値は null にしておきましょう。

スライダーが初期化されていないときのスタイル調整を行う

.card04 {
  /* スライダー非活性時 */
  .swiper-a:not(.swiper-initialized) {
    padding: 0;
    .swiper-button-prev,
    .swiper-button-next {
      display: none;
    }
    .swiper-wrapper {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }
  }
}

.card04 {

/* スライダー非活性時 */

.swiper-a:not(.swiper-initialized) {

padding: 0;

.swiper-button-prev,

.swiper-button-next {

display: none;

}

.swiper-wrapper {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 32px;

}

PCのときはスライダーが生成されていない状態なので、横並びにするなどのレイアウト調整はCSSで行う必要があります。
また、SPからPCに切り替えると、前へ / 次へボタンやページネーションなどの一度生成された要素はそのまま残るので、display: none; にしておきましょう。

#05 応用総スライド数が slidesPerView を超える時だけスライダーにする

プレビュー
ソースを見る

先ほどのデモは、ブレークポイント（1点）によってスライダーの解除↔初期化を切り替えるシンプルな仕様でした。
一方こちらは、ブレークポイント（複数）ごとに総スライド数と slidesPerView を比較して、総スライド数の方が多いときだけスライダーにする、という形で作成してみました。
こちらの方がより実際のニーズに応えられる仕様ではないでしょうか。

予めブレークポイントと slidesPerView のセットを配列に格納しておき、総スライド数と比較してスライダーの解除↔初期化を切り替えるという形をとっています。
ブレークポイントがさらに多い場合も、Swiperのパラメータ（breakpoints）と配列にそれぞれ追加すれば対応できます。

デモのポイント

ブレークポイントと slidesPerView のセットを配列に格納
スライダーの解除↔再初期化を行う
スライダーが初期化されていないときのスタイル調整を行う

ブレークポイントと slidesPerView のセットを配列に格納

// ブレークポイントごとの slidesPerView を配列に格納
const breakpoints = [
  {
    breakpoint: 0,
    slidesPerView: 1,
  },
  {
    breakpoint: 600,
    slidesPerView: 2,
  },
  {
    breakpoint: 1025,
    slidesPerView: 4,
  }
];
breakpoints.reverse(); // 配列を逆順にする

// ブレークポイントごとの slidesPerView を配列に格納

const breakpoints = [

{

breakpoint: 0,

slidesPerView: 1,

{

breakpoint: 600,

slidesPerView: 2,

{

breakpoint: 1025,

slidesPerView: 4,

}

];

breakpoints.reverse(); // 配列を逆順にする

まずブレークポイントと slidesPerView のセットを配列に格納しておきます。
breakpoints.reverse() をしているのは、Swiperのパラメータ（breakpoints）の指定順と、配列の順番を揃えたかったためです。

スライダーの解除↔再初期化を行う

let mySwiper, mySlidesPerView;
let isInited = false; // スライダーが初期化済みかどうかのフラグ
const slideLength = document.querySelectorAll('.card04 .swiper-b .swiper-slide').length; // 総スライド数を取得

const checkBreakpoint = () => {
  for (let key in breakpoints) {
    let bp = breakpoints[key]['breakpoint'];
    // 大きいブレークポイントから順に、メディアクエリにマッチするか判定
    if (window.matchMedia('(min-width:' + bp + 'px)').matches) {
      // マッチする場合、そのブレークポイントの slidesPerView をセット
      mySlidesPerView = breakpoints[key]['slidesPerView'];
      break;
    }
  }

  if (slideLength > mySlidesPerView) {
    if (!isInited) {
      // 総スライド数が slidesPerView より多く、スライダーがまだ初期化されていなかったら、スライダーを初期化
      initSwiper();
      isInited = true;
    }
  } else {
    if (isInited) {
      // 総スライド数が slidesPerView より少なく、スライダーが初期化済みだったら、スライダーを解除
      mySwiper.destroy(false, true);
      isInited = false;
    }
  }
};

const initSwiper = () => {
  mySwiper = new Swiper('.card04 .swiper-b', {
    ⋮
  });
};

window.addEventListener('resize', function() {
  checkBreakpoint(); // リサイズ時に実行
});
checkBreakpoint(); // ロード時に初回実行

let mySwiper, mySlidesPerView;

let isInited = false; // スライダーが初期化済みかどうかのフラグ

const slideLength = document.querySelectorAll('.card04 .swiper-b .swiper-slide').length; // 総スライド数を取得

const checkBreakpoint = () => {

for (let key in breakpoints) {

let bp = breakpoints[key]['breakpoint'];

// 大きいブレークポイントから順に、メディアクエリにマッチするか判定

if (window.matchMedia('(min-width:' + bp + 'px)').matches) {

// マッチする場合、そのブレークポイントの slidesPerView をセット

mySlidesPerView = breakpoints[key]['slidesPerView'];

break;

}

if (slideLength > mySlidesPerView) {

if (!isInited) {

// 総スライド数が slidesPerView より多く、スライダーがまだ初期化されていなかったら、スライダーを初期化

initSwiper();

isInited = true;

}

} else {

if (isInited) {

// 総スライド数が slidesPerView より少なく、スライダーが初期化済みだったら、スライダーを解除

mySwiper.destroy(false, true);

isInited = false;

}

};

const initSwiper = () => {

mySwiper = new Swiper('.card04 .swiper-b', {

⋮

});

};

window.addEventListener('resize', function() {

checkBreakpoint(); // リサイズ時に実行

});

checkBreakpoint(); // ロード時に初回実行

ロード時とリサイズ時に、配列のブレークポイントがメディアクエリにマッチするか判定していき、マッチしたブレークポイントの slidesPerView と総スライド数を比較して解除↔再初期化を切り替えます。

スライダーが初期化されていないときのスタイル調整を行う

.card04 {  /* スライダー非活性時 */
  .swiper-b:not(.swiper-initialized) {
    padding: 0;
    .swiper-button-prev,
    .swiper-button-next {
      display: none;
    }
    .swiper-wrapper {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      @media only screen and (max-width: 1024px) and (min-width: 600px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
      @media only screen and (max-width: 599px) {
        grid-template-columns: repeat(1, 1fr);
      }
    }
  }
}

.card04 { /* スライダー非活性時 */

.swiper-b:not(.swiper-initialized) {

padding: 0;

.swiper-button-prev,

.swiper-button-next {

display: none;

}

.swiper-wrapper {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 32px;

@media only screen and (max-width: 1024px) and (min-width: 600px) {

grid-template-columns: repeat(2, 1fr);

gap: 24px;

}

@media only screen and (max-width: 599px) {

grid-template-columns: repeat(1, 1fr);

}

先ほどのデモと同様に、スライダーが生成されていないときのレイアウト調整をCSSで行います。

#06 応用ゆっくり動き続ける無限ループスライダー

プレビュー
ソースを見る

通常の自動再生は「スライダーが止まる→動く」の繰り返しですが、止まらずに常にゆっくり動き続けるという形にしたいときもありますよね。
基本的には autoplay.delay を 0 にすれば実現できるのですが、そのままだとユーザーがドラッグしたときの挙動がおかしな感じになってしまうので、そこをカスタマイズする必要があります。
※ユーザーがドラッグできない形でよければ、allowTouchMove: false にしておくだけでOKです。

デモのポイント

ゆっくり動き続けるようにする
ユーザーがドラッグしたときのスピード調整
ホバーしたら他のスライドを薄くする

ゆっくり動き続けるようにする

const initSwiper = () => {
  const mySwiper = new Swiper('.card05 .swiper', {
    ⋮
    speed: 8000,
    autoplay: {
      delay: 0,
    },
    ⋮
  });
};

window.addEventListener('load', function(){
  initSwiper(); // ページ読み込み後に初期化
});

const initSwiper = () => {

const mySwiper = new Swiper('.card05 .swiper', {

⋮

speed: 8000,

autoplay: {

delay: 0,

⋮

});

};

window.addEventListener('load', function(){

initSwiper(); // ページ読み込み後に初期化

});

autoplay.delay を 0 にすることで常に動き続ける形にすることができます。

注意点

初期化のタイミングをページ読み込み後にしておかないと、自動再生が止まった状態で表示されてしまうことがありました。

ユーザーがドラッグしたときのスピード調整

const mySwiper = new Swiper('.card05 .swiper', {
  ⋮
  freeMode: {
    enabled: true,
    momentum: false,
  },
  ⋮
  on: {
    touchEnd: (swiper) => {
      swiper.slideTo(swiper.activeIndex + 1);
    }
  }
});

const mySwiper = new Swiper('.card05 .swiper', {

⋮

freeMode: {

enabled: true,

momentum: false,

⋮

on: {

touchEnd: (swiper) => {

swiper.slideTo(swiper.activeIndex + 1);

}

});

ユーザーのドラッグ操作が終わったとき（ touchEnd ）に、 slideTo(swiper.activeIndex + 1) で次のスライドへ移動させるようにしました。

また、スライド位置のスナップや慣性スクロールが邪魔になるため、以下の設定も重要です。
freeMode：true にするとスライド位置がスナップしなくなります。
freeMode.momentum：false にすると慣性スクロールがオフになります。

こちらの記事を参考にさせていただきました。
スワイプできる無限ループスライダーを実装する【Swiper】

ホバーしたら他のスライドを薄くする

.card05 {
  /* スライド ホバー時 */
  .swiper:hover {
    .slide:not(:hover) {
      @media only screen and (min-width: 1025px) {
        opacity: .3;
      }
    }
  }
}

.card05 {

/* スライドホバー時 */

.swiper:hover {

.slide:not(:hover) {

@media only screen and (min-width: 1025px) {

opacity: .3;

}

ホバー中の要素だけを目立たせることで、注目を引くことができる表現ですね。
このように手軽に実装することができます。

#07 基本サムネイル（スライダー）を付けて連動させる

プレビュー
ソースを見る

メインのスライダーとサムネイルのスライダーがあり、2つを連動させるタイプです。
非常に簡単に実装でき、そのままでサムネイルのスライダーの動きも自然なので、複雑なカスタマイズは必要ありません。

また、このデモで初めてフェードモードを使用しているので、フェードモードのときに共通で調整しておきたい項目も合わせてご説明します。

デモのポイント

2つのスライダーを連動させる
フェードモード時の共通調整

2つのスライダーを連動させる

const mySwiper_thumb = new Swiper('.gallery01 .swiper-thumb', {
  ⋮
});

const mySwiper_main = new Swiper('.gallery01 .swiper-main', {
  ⋮
  thumbs: {
    swiper: mySwiper_thumb,
  },
});

const mySwiper_thumb = new Swiper('.gallery01 .swiper-thumb', {

⋮

});

const mySwiper_main = new Swiper('.gallery01 .swiper-main', {

⋮

thumbs: {

swiper: mySwiper_thumb,

});

thumbs で連動させたいスライダーのインスタンス名（ここでは mySwiper_thumb ）を指定すると、2つのスライダーが連動するようになります。
mySwiper_main のほうで mySwiper_thumb を指定するので、初期化の記述順が逆だとエラーになってしまいますのでご注意ください。

フェードモード時の共通調整

const mySwiper_main = new Swiper('.gallery01 .swiper-main', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true,
  },
  ⋮
});

const mySwiper_main = new Swiper('.gallery01 .swiper-main', {

effect: 'fade',

fadeEffect: {

crossFade: true,

⋮

});

切り替えのアニメーションをスライドではなくフェードにするときは、このように指定します。

注意点

フェードモードにするとすべてのスライドが重なる形になります。もしスライド内に透明の余白があった場合、下のスライドが見えてしまいます。
対策として fadeEffect.crossFade: true もセットで指定しておきましょう。

注意点

フェードモード時はドラッグ操作ではふわっと切り替わるのですが、前へ / 次へボタンを押すと transition が効かずにパッと切り替わってしまいます。
対策として、以下のようにCSSで上書きしておくのがお勧めです。

/* フェードモード時 共通調整 */
.swiper-fade {
  .swiper-slide {
    transition-property: opacity !important;
  }
}

/* フェードモード時共通調整 */

.swiper-fade {

.swiper-slide {

transition-property: opacity !important;

}

#08 応用サムネイル（非スライダー）を付けて連動

プレビュー
ソースを見る

こちらはサムネイルをスライダーにしないで連動させるタイプです。
thumbs は使わずに、スライド切り替え時にアクティブ用のクラスを付け替える処理を追加します。

const thumb = document.querySelectorAll('.gallery02 .thumb-media');

const switchThumb = (index) => {
  document.querySelector('.gallery02 .thumb-media-active').classList.remove('thumb-media-active');
  thumb[index].classList.add('thumb-media-active');
}

const mySwiper = new Swiper('.gallery02 .swiper', {
  ⋮
  on: {
    afterInit: (swiper) => {
      thumb[swiper.realIndex].classList.add('thumb-media-active');
      for (let i = 0; i < thumb.length; i++) {
        thumb[i].onclick = () => {
          swiper.slideTo(i);
        };
      }
    },
    slideChange: (swiper) => {
      switchThumb(swiper.realIndex);
    },
  }
});

const thumb = document.querySelectorAll('.gallery02 .thumb-media');

const switchThumb = (index) => {

document.querySelector('.gallery02 .thumb-media-active').classList.remove('thumb-media-active');

thumb[index].classList.add('thumb-media-active');

}

const mySwiper = new Swiper('.gallery02 .swiper', {

⋮

on: {

afterInit: (swiper) => {

thumb[swiper.realIndex].classList.add('thumb-media-active');

for (let i = 0; i < thumb.length; i++) {

thumb[i].onclick = () => {

swiper.slideTo(i);

};

}

slideChange: (swiper) => {

switchThumb(swiper.realIndex);

}

});

サムネイルはスライダーにしないので、普通にCSSでレイアウト調整をしておきます。
そしてメイン画像のスライダーのほうで、スライドが切り替わったとき（ slideChange ）に、アクティブなスライド番号を取得し、対応するサムネイルにクラス .thumb-media-active を付与する、という処理を追加します。
また、予めHTML側でアクティブ状態のサムネイルにクラス .thumb-media-active を付けておき、スライダーの初期化時（ afterInit ）にその順番を取得して表示を合わせるようにしました。

#09 応用スライダーの向きを交互に変える

プレビュー
ソースを見る

#06 ゆっくり動き続ける無限ループスライダーからの派生で、進行方向を交互に変えたパターンです。
同じオプションはまとめておき、別々に設定する箇所を後から追加する形にしました。

デモのポイント

スライダーの進行方向を逆にする
同じオプションをまとめる

スライダーの進行方向を逆にする

autoplay: {
  reverseDirection: true
},

autoplay: {

reverseDirection: true

autoplay.reverseDirection：true にすると自動再生の進行方向が逆向きになります。

// 進行方向：通常
on: {
  touchEnd: (swiper) => {
    swiper.slideTo(swiper.activeIndex + 1);
  }
}

// 進行方向：逆向き
on: {
  touchEnd: (swiper) => {
    swiper.slideTo(swiper.activeIndex - 1);
  }
}

// 進行方向：通常

on: {

touchEnd: (swiper) => {

swiper.slideTo(swiper.activeIndex + 1);

}

// 進行方向：逆向き

on: {

touchEnd: (swiper) => {

swiper.slideTo(swiper.activeIndex - 1);

}

#06 ユーザーがドラッグしたときのスピード調整と同様ですが、方向が逆向きの場合は slideTo(swiper.activeIndex – 1); となるようにしているところがポイント。

同じオプションをまとめる

const params = {
  slidesPerView: 'auto',
  loop: true,
  loopedSlides: slideLength,
  speed: 6000,
  autoplay: {
    delay: 0,
    disableOnInteraction: false,
  },
  freeMode: {
    enabled: true,
    momentum: false,
  },
  grabCursor: true,
}

const initSwiper = () => {
  const mySwiper_a = new Swiper('.gallery03 .swiper-a', {
    ...params,
    on: {
      touchEnd: (swiper) => {
        swiper.slideTo(swiper.activeIndex + 1);
      }
    }
  });

  const mySwiper_b = new Swiper('.gallery03 .swiper-b', {
    ...params,
    autoplay: {
      ...params.autoplay,
      reverseDirection: true
    },
    on: {
      touchEnd: (swiper) => {
        swiper.slideTo(swiper.activeIndex - 1);
      }
    }
  });
};

window.addEventListener('load', function(){
  initSwiper(); // ページ読み込み後に初期化
});

const params = {

slidesPerView: 'auto',

loop: true,

loopedSlides: slideLength,

speed: 6000,

autoplay: {

delay: 0,

disableOnInteraction: false,

freeMode: {

enabled: true,

momentum: false,

grabCursor: true,

}

const initSwiper = () => {

const mySwiper_a = new Swiper('.gallery03 .swiper-a', {

...params,

on: {

touchEnd: (swiper) => {

swiper.slideTo(swiper.activeIndex + 1);

}

});

const mySwiper_b = new Swiper('.gallery03 .swiper-b', {

...params,

autoplay: {

...params.autoplay,

reverseDirection: true

on: {

touchEnd: (swiper) => {

swiper.slideTo(swiper.activeIndex - 1);

}

});

};

window.addEventListener('load', function(){

initSwiper(); // ページ読み込み後に初期化

});

まず params で共通のオプションをまとめておき、異なる部分はスプレッド構文（ … ）を利用して後から追加しています。

#10 応用スライダーを入れ子にする

プレビュー
ソースを見る

手順説明などで見かける、スライダーが入れ子になっているパターンです。
また、「STEP.01」のようにページネーションの出力内容をカスタマイズしてみました。

デモのポイント

スライダーを入れ子にする
ページネーションの出力内容をカスタマイズする

スライダーを入れ子にする

const mySwiper_sub = new Swiper('.flow01 .swiper-sub', {
  ⋮
  nested: true,
  pagination: {
    el: '.flow01 .swiper-pagination-sub',
  },
});

const mySwiper_main = new Swiper('.flow01 .swiper-main', {
  ⋮
  pagination: {
    el: '.flow01 .swiper-pagination-main',
  },
  navigation: {
    nextEl: '.flow01 .swiper-button-next',
    prevEl: '.flow01 .swiper-button-prev',
  },
  ⋮
});

const mySwiper_sub = new Swiper('.flow01 .swiper-sub', {

⋮

nested: true,

pagination: {

el: '.flow01 .swiper-pagination-sub',

});

const mySwiper_main = new Swiper('.flow01 .swiper-main', {

⋮

pagination: {

el: '.flow01 .swiper-pagination-main',

navigation: {

nextEl: '.flow01 .swiper-button-next',

prevEl: '.flow01 .swiper-button-prev',

⋮

});

<div class="flow01 l-section">
  <div class="l-inner">

    <div class="swiper-pagination-main"></div>
    <div class="swiper swiper-main">
      <div class="swiper-wrapper">

        <div class="swiper-slide">
          <div class="mainslide">
            <h2 class="mainslide-title">Lorem ipsum</h2>
            <div class="swiper swiper-sub">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="subslide">
                    <div class="subslide-media"><img src="./img/icon01.svg" alt=""></div>
                    <p class="subslide-text">Dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                ⋮
                <div class="swiper-slide">
                  <div class="subslide">
                    <div class="subslide-media"><img src="./img/icon03.svg" alt=""></div>
                    <p class="subslide-text">Ad minim veniam.</p>
                  </div>
                </div>
              </div><!-- /swiper-wrapper -->
              <div class="swiper-pagination-sub"></div>
            </div><!-- /swiper-sub -->
          </div>
        </div>

        <div class="swiper-slide">
          <div class="mainslide">
            <h2 class="mainslide-title">Sed eiusmod</h2>
            <div class="subslide">
              <div class="subslide-media"><img src="./img/icon05.svg" alt=""></div>
              <p class="subslide-text">Dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
        </div>

        <div class="swiper-slide">
          <div class="mainslide">
            <h2 class="mainslide-title">Ut enim</h2>
            <div class="swiper swiper-sub">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="subslide">
                    <div class="subslide-media"><img src="./img/icon01.svg" alt=""></div>
                    <p class="subslide-text">Dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                ⋮
                <div class="swiper-slide">
                  <div class="subslide">
                    <div class="subslide-media"><img src="./img/icon04.svg" alt=""></div>
                    <p class="subslide-text">Ad minim veniam.</p>
                  </div>
                </div>
              </div><!-- /swiper-wrapper -->
              <div class="swiper-pagination-sub"></div>
            </div><!-- /swiper-sub -->
          </div>
        </div>

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

  </div>
</div>

<h2 class="mainslide-title">Lorem ipsum</h2>

<p class="subslide-text">Dolor sit amet, consectetur adipiscing elit.</p>

</div>

⋮

<p class="subslide-text">Ad minim veniam.</p>

</div>

</div>

</div>

</div>

<h2 class="mainslide-title">Sed eiusmod</h2>

<p class="subslide-text">Dolor sit amet, consectetur adipiscing elit.</p>

</div>

<p class="subslide-text">Dolor sit amet, consectetur adipiscing elit.</p>

</div>

⋮

<p class="subslide-text">Ad minim veniam.</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

このように、親スライダーと子スライダーをそのまま入れ子構造にするだけで実装できます。分かりやすいですね。
親スライダーのほうに指定している nested: true が重要で、親と子のスライダーの方向が同じ場合の誤作動を防ぐための設定です。もしこの設定をしていないと、子スライダーをドラッグしたいのに親スライダーが動いてしまう！といった問題が起こりますのでご注意ください。

ページネーションの出力内容をカスタマイズする

const mySwiper_main = new Swiper('.flow01 .swiper-main', {
  ⋮
  pagination: {
    ⋮
    renderBullet: (index, className) => {
      let num = ('00' + (index + 1)).slice(-2);
      return '<span class="' + className + '"><span class="step">STEP.</span>' + num + '</span>';
    },
  },
  ⋮
});

const mySwiper_main = new Swiper('.flow01 .swiper-main', {

⋮

pagination: {

⋮

renderBullet: (index, className) => {

let num = ('00' + (index + 1)).slice(-2);

return '<span class="' + className + '"><span class="step">STEP.</span>' + num + '</span>';

⋮

});

renderBullet でページネーションの内容をカスタマイズすることができます。
index でスライド番号、className でクラス名を取得できるので、それを利用しつつ「STEP.01」の形になるように調整してみました。

#11 基本メインビジュアルフェードアニメーション

プレビュー
ソースを見る

写真がゆっくりズームインし、テキストが少し遅れてフェードインする、というシンプルなアニメーションを付けてみました。このくらいであれば特別なカスタマイズは不要で、フェードモードで実装したものに対しCSSでアニメーションを付けるだけで作成できます。

const mySwiper = new Swiper('.mv01 .swiper', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true,
  },
  loop: true,
  loopAdditionalSlides: 1,
  speed: 2000,
  autoplay: {
    delay: 7000,
    disableOnInteraction: false,
    waitForTransition: false,
  },
  followFinger: false,
  pagination: {
    el: '.mv01 .swiper-pagination',
    clickable: true,
  },
});

const mySwiper = new Swiper('.mv01 .swiper', {

effect: 'fade',

fadeEffect: {

crossFade: true,

loop: true,

loopAdditionalSlides: 1,

speed: 2000,

autoplay: {

delay: 7000,

disableOnInteraction: false,

waitForTransition: false,

followFinger: false,

pagination: {

el: '.mv01 .swiper-pagination',

clickable: true,

});

autoplay.waitForTransition：false にすると、スライド切り替え中にも自動再生が止まらないようになります。true だと最初のスライドの表示時間だけ短くなってしまうので、本デモのようにアニメーション演出を入れるなら false にしておいたほうが自然だと思います。

followFinger：false にすると、スライド切り替えのアニメーションはドラッグ操作が終了してから開始されるようになります。テキストや背景にアニメーションを付けているので、ドラッグ中に下のスライドがだんだん透けて出てきてしまうと困るため、false にしています。

フェードモード時の共通の注意事項はフェードモード時の共通調整でも説明していますので、合わせてご確認ください。

.mv01 {
  /* スライド アクティブ時 */
  .swiper-slide {
    &[class*=-active] {
      .slide-media img {
        transition-delay: 0s;
        transform: scale(1.05);
      }
      .slide-title {
        animation: mv01-fadeIn 2s .5s var(--easing) both;
      }
    }
  }
}

@keyframes mv01-fadeIn {
  0% {
    transform: scale(.5);
    opacity: 0;
    filter: blur(300px);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

.mv01 {

/* スライドアクティブ時 */

.swiper-slide {

&[class*=-active] {

.slide-media img {

transition-delay: 0s;

transform: scale(1.05);

}

.slide-title {

animation: mv01-fadeIn 2s .5s var(--easing) both;

}

@keyframes mv01-fadeIn {

0% {

transform: scale(.5);

opacity: 0;

filter: blur(300px);

}

100% {

transform: scale(1);

opacity: 1;

filter: blur(0);

}

[class*=-active] のように指定することで、クラスに -active が含まれる場合にアニメーションを適用させています。

#12 応用始めと終わりで別々のアニメーションを付ける

プレビュー
ソースを見る

アクティブになったときはコンテンツが下から上にフェードインして、次のスライドに切り替わる際にはさらに上に移動しながらフェードアウトする、という感じで違うアニメーションを組み合わせてみました。

const myDelay = 7000;
let timer;

// アニメーション切り替え
const switchAnimation = () => {
  clearTimeout(timer);
  let activeSlide = document.querySelectorAll('.mv02 .swiper-slide[class*=-active]');
  for (let i = 0; i < activeSlide.length; i++) {
    activeSlide[i].classList.remove('anm-finished');
    activeSlide[i].classList.add('anm-started');
  }
  timer =  setTimeout(() => {
    for (let i = 0; i < activeSlide.length; i++) {
      activeSlide[i].classList.remove('anm-started');
      activeSlide[i].classList.add('anm-finished');
    }
  }, myDelay - 1000);
}

// アニメーション終了
const finishAnimation = () => {
  let activeSlide = document.querySelectorAll('.mv02 .swiper-slide.anm-started');
  for (let i = 0; i < activeSlide.length; i++) {
    activeSlide[i].classList.remove('anm-started');
    activeSlide[i].classList.add('anm-finished');
  }
}

const mySwiper = new Swiper('.mv02 .swiper', {
  ⋮
  on: {
    slideChange: () => {
      finishAnimation();
    },
    slideChangeTransitionStart: () => {
      switchAnimation();
    },
  }
});

const myDelay = 7000;

let timer;

// アニメーション切り替え

const switchAnimation = () => {

clearTimeout(timer);

let activeSlide = document.querySelectorAll('.mv02 .swiper-slide[class*=-active]');

for (let i = 0; i < activeSlide.length; i++) {

activeSlide[i].classList.remove('anm-finished');

activeSlide[i].classList.add('anm-started');

}

timer = setTimeout(() => {

for (let i = 0; i < activeSlide.length; i++) {

activeSlide[i].classList.remove('anm-started');

activeSlide[i].classList.add('anm-finished');

}

}, myDelay - 1000);

}

// アニメーション終了

const finishAnimation = () => {

let activeSlide = document.querySelectorAll('.mv02 .swiper-slide.anm-started');

for (let i = 0; i < activeSlide.length; i++) {

activeSlide[i].classList.remove('anm-started');

activeSlide[i].classList.add('anm-finished');

}

const mySwiper = new Swiper('.mv02 .swiper', {

⋮

on: {

slideChange: () => {

finishAnimation();

slideChangeTransitionStart: () => {

switchAnimation();

}

});

.anm-started が始めのアニメーション用（下から上にフェードイン）
.anm-finished が終わりのアニメーション用（上に移動しながらフェードアウト）
のクラス名です。

1：slideChangeTransitionStart のときにアクティブなスライドに .anm-started を追加
2：myDelay – 1000 の時間がたったら .anm-started を .anm-finished に付け替える

3：slideChange のときに .anm-started を .anm-finished に付け替える
※ユーザーが手動でスライドを切り替えたときのための処理です

このようにクラスを付け替えて、ちょうどよいタイミングでアニメーションがかかるようにしています。

#13 応用縦方向のスライダー

プレビュー
ソースを見る

こちらはスライダーの方向を縦にしてみたパターンです。
横方向スライダーとの違いは .swiper への高さ指定が必須になることくらいで、他には方向が変わることによる特別な調整は必要ありません。

let mySwiper_main;

const mySwiper_thumb = new Swiper('.mv03 .swiper-thumb', {
  ⋮
  direction: 'vertical',
  slideToClickedSlide: true,
  thumbs: {
    swiper: mySwiper_main,
  },
});

mySwiper_main = new Swiper('.mv03 .swiper-main', {
  ⋮
  direction: 'vertical',
  thumbs: {
    swiper: mySwiper_thumb,
  },
});

let mySwiper_main;

const mySwiper_thumb = new Swiper('.mv03 .swiper-thumb', {

⋮

direction: 'vertical',

slideToClickedSlide: true,

thumbs: {

swiper: mySwiper_main,

});

mySwiper_main = new Swiper('.mv03 .swiper-main', {

⋮

direction: 'vertical',

thumbs: {

swiper: mySwiper_thumb,

});

direction：スライダーの方向を指定します。’vertical’ で縦方向になります。
slideToClickedSlide：true にすると、クリックしたスライドまで移動する（アクティブにする）ようになります。

サムネイルスライダーの連動についてですが、#07 のほうでは片方だけを連動させればよかったのに対し、このデモでは双方向に連動させる必要があります。そのため、thumbs で指定するインスタンス名がエラーになってしまわないように、最初に let mySwiper_main; で宣言しておくようにしました。

.mv03 {
  .swiper-main {
    height: 800px;
    @media only screen and (max-width: 1024px) {
      height: max(70vh, 70vw);
    }
  }
}

.mv03 {

.swiper-main {

height: 800px;

@media only screen and (max-width: 1024px) {

height: max(70vh, 70vw);

}

縦方向の場合は .swiper への高さ指定が必須となります。

#14 応用スライドごとに表示時間を変えて、進捗状況と連動したプログレスバーを作成する

プレビュー
ソースを見る

スライドによってテキスト量が全然違うケースなどでは、スライドごとに表示時間を変える必要が出てくると思います。そうなると、プログレスバーなどのアニメーションもスライド表示時間とぴったり合うようにしたいですよね。
本デモではその2点のカスタマイズをご紹介します。

プログレスバーはもともとページネーションで用意されているのですが、最後のスライドから最初のスライドに戻ったときの動きなどがちょっと理想と違う部分があり、別で作成しました。

デモのポイント

スライドごとに表示時間（delay）を変える
進捗状況と連動したアニメーション（プログレスバー）

スライドごとに表示時間（delay）を変える

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slide">
        <div class="slide-media img-cover"><img src="https://picsum.photos/id/139/2400/1500" alt=""></div>
        <div class="slide-content">
          <div class="slide-fraction"></div>
          <h2 class="slide-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
        </div>
      </div>
    </div>
    <div class="swiper-slide" data-swiper-autoplay="14000">
      <div class="slide">
        <div class="slide-media img-cover"><img src="https://picsum.photos/id/1060/2400/1500" alt=""></div>
        <div class="slide-content">
          <div class="slide-fraction"></div>
          <h2 class="slide-title">Sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.</h2>
        </div>
      </div>
    </div>
    ⋮

<h2 class="slide-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>

</div>

<h2 class="slide-title">Sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.</h2>

</div>

⋮

autoplay.delay の値はHTML側でも指定できるようになっています。
上記サンプルのように、.swiper-slide に data-swiper-autoplay の属性でミリ秒で指定します。

進捗状況と連動したアニメーション（プログレスバー）

const myDelay = 7000;

const slide = document.querySelectorAll('.mv04 .swiper-slide');
const slideLength = slide.length;

// スライド番号・円形ライン用のSVGを追加
const fraction = document.querySelectorAll('.mv04 .slide-fraction');
const fractionEl = '<span class="circle"><svg viewBox="0 0 64 64"><circle class="circle-01" cx="50%" cy="50%" r="31"></circle><circle class="circle-02" cx="50%" cy="50%" r="31"></circle></svg></span><span class="current"></span><span class="total">' + slideLength + '</span>';
for (let i = 0; i < fraction.length; i++) {
  fraction[i].insertAdjacentHTML('beforeend', fractionEl);
}

// 各スライドの表示時間とアニメーションを連動
const slideDelay = [];
for (let i = 0; i < slideLength; i++) {
  // HTML側の data-swiper-autoplay を取得
  let delay = Number(slide[i].getAttribute('data-swiper-autoplay'));
  slideDelay[i] = delay ? delay : myDelay; // HTMLに指定がなければ myDelay をセット

  // 各タグに transitionDuration / animationDuration をセット
  slide[i].querySelector('img').style.transitionDuration = slideDelay[i] + 'ms';
  slide[i].querySelector('.circle-02').style.animationDuration = slideDelay[i] + 'ms';
  slide[i].querySelector('.current').textContent = i + 1;
}

// プログレスバーの更新処理
const progressBar = document.querySelector('.mv04 .progressbar-fill');
const updateProgress = (index) => {
  let start = Math.floor(index / slideLength * 100) / 100;
  let end = Math.floor((index + 1) / slideLength * 100) / 100;

  // 一度スタートの位置に移動してから
  progressBar.style.transition = '';
  progressBar.style.transform = 'scaleX(' + start + ')';
  setTimeout(() => {
    // ゴールの位置まで伸ばす
    progressBar.style.transition = slideDelay[index] + 'ms linear';
    progressBar.style.transform = 'scaleX(' + end + ')';
  }, 100);
}

const mySwiper = new Swiper('.mv04 .swiper', {
  ⋮
  on: {
    afterInit: () => {
      updateProgress(0);
    },
    realIndexChange: (swiper) => {
      updateProgress(swiper.realIndex);
    },
  }
});

const myDelay = 7000;

const slide = document.querySelectorAll('.mv04 .swiper-slide');

const slideLength = slide.length;

// スライド番号・円形ライン用のSVGを追加

const fraction = document.querySelectorAll('.mv04 .slide-fraction');

const fractionEl = '<span class="circle"><svg viewBox="0 0 64 64"><circle class="circle-01" cx="50%" cy="50%" r="31"></circle><circle class="circle-02" cx="50%" cy="50%" r="31"></circle></svg></span><span class="current"></span><span class="total">' + slideLength + '</span>';

for (let i = 0; i < fraction.length; i++) {

fraction[i].insertAdjacentHTML('beforeend', fractionEl);

}

// 各スライドの表示時間とアニメーションを連動

const slideDelay = [];

for (let i = 0; i < slideLength; i++) {

// HTML側の data-swiper-autoplay を取得

let delay = Number(slide[i].getAttribute('data-swiper-autoplay'));

slideDelay[i] = delay ? delay : myDelay; // HTMLに指定がなければ myDelay をセット

// 各タグに transitionDuration / animationDuration をセット

slide[i].querySelector('img').style.transitionDuration = slideDelay[i] + 'ms';

slide[i].querySelector('.circle-02').style.animationDuration = slideDelay[i] + 'ms';

slide[i].querySelector('.current').textContent = i + 1;

}

// プログレスバーの更新処理

const progressBar = document.querySelector('.mv04 .progressbar-fill');

const updateProgress = (index) => {

let start = Math.floor(index / slideLength * 100) / 100;

let end = Math.floor((index + 1) / slideLength * 100) / 100;

// 一度スタートの位置に移動してから

progressBar.style.transition = '';

progressBar.style.transform = 'scaleX(' + start + ')';

setTimeout(() => {

// ゴールの位置まで伸ばす

progressBar.style.transition = slideDelay[index] + 'ms linear';

progressBar.style.transform = 'scaleX(' + end + ')';

}, 100);

}

const mySwiper = new Swiper('.mv04 .swiper', {

⋮

on: {

afterInit: () => {

updateProgress(0);

realIndexChange: (swiper) => {

updateProgress(swiper.realIndex);

}

});

下のプログレスバー（ progressbar ）はスライダー全体の進捗率、円形ライン（ .slide-fraction ）は各スライドの進捗率と連動しています。
アニメーションはすべてCSSで作成し、transitionDuration と animationDuration をそれぞれの要素にセットすることで時間を合わせる形となっています。

#15 応用お手軽パララックス+スライド外のコンテンツと連動させる

プレビュー
ソースを見る

メインビジュアルのように画面いっぱいに広がるデザインでは、スライドモードを用いると少しうるさく感じてしまうので、フェードモードを採用しがちです。
でもちょっとしたひと工夫でスライドモードならではの表現を楽しむこともできます！ということで、このデモでは横にずれる効果を利用した視差効果（パララックス）を付けてみました。
こちら非常に簡単に対応できるので、ちょっとしたクオリティアップにお勧めです。

また、スライドするのは背景だけにして、その上に位置固定でコンテンツを配置するようにしてみました。これもスライド全体がのっぺりと動くより、少しリッチな印象にできるのではないかなと思います。

デモのポイント

視差効果（パララックス）を付ける
スライド外に独自要素を置いて連動させる

視差効果（パララックス）を付ける

仕組みは簡単で、前のスライドと次のスライドの画像の位置を、アクティブなスライド側（中央）にずらしておくだけです。そうすると、スライドの移動距離よりも画像の移動距離が少なくなり、奥行きを感じられるようになります。

.mv05 {
  /* 前後のスライド */
  .swiper-slide {
    &[class*=-active] {
      .slide-media.clip img {
        transform: scale(1.2);
      }
    }
    &[class*=-prev] {
      .slide-media img {
        transform: translateX(80vw);
      }
    }
    &[class*=-next] {
      .slide-media img {
        transform: translateX(-80vw);
      }
    }
  }
}

.mv05 {

/* 前後のスライド */

.swiper-slide {

&[class*=-active] {

.slide-media.clip img {

transform: scale(1.2);

}

&[class*=-prev] {

.slide-media img {

transform: translateX(80vw);

}

&[class*=-next] {

.slide-media img {

transform: translateX(-80vw);

}

また、clip-path を使ってガラスのフレーム風の装飾も入れてみました。

<div class="slide">
  <div class="slide-media clip img-cover"><img src="https://picsum.photos/id/139/2400/1500" alt=""></div>
  <div class="slide-media img-cover"><img src="https://picsum.photos/id/139/2400/1500" alt=""></div>
</div>

</div>

.slide-media {
  height: 800px;
  @media only screen and (max-width: 1024px) {
    height: max(70vh, 70vw);
  }
  img {
    transition: 3s;
  }
  &.clip {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    filter: contrast(1.1);

    --stroke-width: 1.2rem;
    --out: 2.4rem;
    --in: calc(var(--out) + var(--stroke-width));

    clip-path: polygon(
      var(--out) var(--out),
      calc(100% - var(--out)) var(--out),
      calc(100% - var(--out)) calc(100% - var(--out)),
      var(--out) calc(100% - var(--out)),
      var(--out) var(--in),
      var(--in) var(--in),
      var(--in) calc(100% - var(--in)),
      calc(100% - var(--in)) calc(100% - var(--in)),
      calc(100% - var(--in)) var(--in),
      var(--out) var(--in)
    );
  }
}

.slide-media {

height: 800px;

@media only screen and (max-width: 1024px) {

height: max(70vh, 70vw);

}

img {

transition: 3s;

}

&.clip {

position: absolute;

z-index: 1;

top: 0;

left: 0;

width: 100%;

filter: contrast(1.1);

--stroke-width: 1.2rem;

--out: 2.4rem;

--in: calc(var(--out) + var(--stroke-width));

clip-path: polygon(

var(--out) var(--out),

calc(100% - var(--out)) var(--out),

calc(100% - var(--out)) calc(100% - var(--out)),

var(--out) calc(100% - var(--out)),

var(--out) var(--in),

var(--in) var(--in),

var(--in) calc(100% - var(--in)),

calc(100% - var(--in)) calc(100% - var(--in)),

calc(100% - var(--in)) var(--in),

var(--out) var(--in)

);

}

スライド外に独自要素を置いて連動させる

<div class="mv05 l-section">

  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="slide">
          <div class="slide-media clip img-cover"><img src="https://picsum.photos/id/139/2400/1500" alt=""></div>
          <div class="slide-media img-cover"><img src="https://picsum.photos/id/139/2400/1500" alt=""></div>
        </div>
      </div>
      ⋮
    </div><!-- /swiper-wrapper -->

    <div class="content-wrapper">
      <div class="content">
        <h2 class="content-title"><span class="marker">Lorem ipsum</span></h2>
        <p class="content-text"><span class="marker">Dolor sit amet, consectetur adipiscing elit.</span></p>
        <p class="content-link"><span class="marker"><a href="#" class="content-button">VIEW MORE</a></span></p>
      </div>
      ⋮
    </div>

    <div class="fraction">
      <span class="current"><span class="num"></span></span>
      <span class="total"></span>
    </div>
  </div><!-- /swiper -->

</div>

<div class=

BLOG ブログ

【最新v8】Swiperの使い方・実用的なデモ15個の解説 ー基礎から応用までー

Swiperってどんなプラグイン？

Swiperの導入方法

01 Swiperのインストール

ファイルをダウンロードする場合

ダウンロードしたファイルをHTMLで読み込む

02 HTMLにスライド要素を追加

03 JSでスライダーの初期化を行う

04 CSSでデザイン調整を行う

基本のHTML構造・クラス名

Swiperのオプション一覧

パラメータ

プロパティ・メソッド

プロパティ

メソッド

イベント

スライド切り替え

初期化

操作

よく使うオプションを盛り込んだ初期化コードサンプル

#01 基本 基本のスライダー

はみ出させたい要素があれば .swiperの外に出す

前へ / 次へボタンをスライドに対して上下中央揃えにする

ホバー効果でスライドを動かしたり、影を付けたりする場合の調整

#02 基本 右側だけはみ出た形のスライダー

初期状態で右側だけコンテンツ幅からはみ出る

スライドの横幅を固定値（px）にする

前へ / 次へボタンとページネーションを横並びにする

#03 基本 コンテンツ幅からはみ出たスライドを薄くする

自動再生させる

無限ループさせる

ループモード時に気を付けること

コンテンツ幅からはみ出たスライドを薄くする

#04 応用 ブレークポイント切り替えでSPだけスライダーにする

ブレークポイント通過時に実行する

スライダーの解除↔再初期化を行う

スライダーが初期化されていないときのスタイル調整を行う

#05 応用 総スライド数が slidesPerView を超える時だけスライダーにする

ブレークポイントと slidesPerView のセットを配列に格納

スライダーの解除↔再初期化を行う

スライダーが初期化されていないときのスタイル調整を行う

#06 応用 ゆっくり動き続ける無限ループスライダー

ゆっくり動き続けるようにする

ユーザーがドラッグしたときのスピード調整

ホバーしたら他のスライドを薄くする

#07 基本 サムネイル（スライダー）を付けて連動させる

2つのスライダーを連動させる

フェードモード時の共通調整

#08 応用 サムネイル（非スライダー）を付けて連動

#09 応用 スライダーの向きを交互に変える

スライダーの進行方向を逆にする

同じオプションをまとめる

#10 応用 スライダーを入れ子にする

スライダーを入れ子にする

ページネーションの出力内容をカスタマイズする

#11 基本 メインビジュアル フェードアニメーション

#12 応用 始めと終わりで別々のアニメーションを付ける

#13 応用 縦方向のスライダー

#14 応用 スライドごとに表示時間を変えて、進捗状況と連動したプログレスバーを作成する

スライドごとに表示時間（delay）を変える

進捗状況と連動したアニメーション（プログレスバー）

#15 応用 お手軽パララックス+スライド外のコンテンツと連動させる

視差効果（パララックス）を付ける

スライド外に独自要素を置いて連動させる

【最新v8】Swiperの使い方・実用的なデモ15個の解説ー基礎から応用までー

#01 基本基本のスライダー

#02 基本右側だけはみ出た形のスライダー

#03 基本コンテンツ幅からはみ出たスライドを薄くする

#04 応用ブレークポイント切り替えでSPだけスライダーにする

#05 応用総スライド数が slidesPerView を超える時だけスライダーにする

#06 応用ゆっくり動き続ける無限ループスライダー

#07 基本サムネイル（スライダー）を付けて連動させる

#08 応用サムネイル（非スライダー）を付けて連動

#09 応用スライダーの向きを交互に変える

#10 応用スライダーを入れ子にする

#11 基本メインビジュアルフェードアニメーション

#12 応用始めと終わりで別々のアニメーションを付ける

#13 応用縦方向のスライダー

#14 応用スライドごとに表示時間を変えて、進捗状況と連動したプログレスバーを作成する

#15 応用お手軽パララックス+スライド外のコンテンツと連動させる