Java Script / JQuery

サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（基礎編）

ぱんこ 2018年8月1日
7 3,267 読み終わるまで約 1 時間

目次

1. Swiperとは


スライダー（カルーセル）が作れるJavaScriptライブラリです。
しかもPCでもスマホでも使えて、レスポンシブ対応可能！
jQueryにも依存せず、カスタマイズの自由度も高く、見た目も美しいスライダーがサクッとできちゃう。

でも、公式ドキュメントは英語のみ…。

今回は、そんなSwiperについて解説していきます。





2. 使うための準備


CDNからライブラリを読み込む方法が楽でおすすめ。
下記のライブラリとスタイルシートを、Swiperを設置したいHTMLに追加します。

HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js">

最新版は下記にあります。
Swiper - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
※バージョンが変わるとパラメータの書き方が変わることがあるので注意。
以下、4.3.3（2018年7月最新版）対応の内容です。

.cssは<HEAD></HEAD>内に追加します。
.jsは<BODY></BODY>内の方が多少ページの描画が速くなります。（Swiper設置箇所より前に読み込む）
※最新版では.jsをSwiper設置箇所より後に読み込まないと動かなかったというコメントをいただきました（未検証）。
　前に読み込んで動かない方は後に読み込んでみてください。

自分のサーバーに置きたい人は、GitHubからダウンロードできます。
Releases · nolimits4web/swiper · GitHub

swiper.min（.js/.css）とswiper（.js/.css）がありますが、minの方は空白やコメントなどを除去した圧縮版です。
機能はどちらも変わりませんので、そのまま読み込んで使うだけなら軽いminの方で。


3. 基本の要素


HTML
<!-- Swiper START -->
<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 class="swiper-slide">Slide 4</div>
	</div>
</div>
<!-- Swiper END -->
JavaScript
var mySwiper = new Swiper('.swiper-container', {
});
どんなレイアウトにするにしても、絶対省略できないのがこの部分。
これを実際動かすとこうなります。

Slide 1
Slide 2
Slide 3
Slide 4

左右にスワイプ（PCなら左クリックして左右に移動）させてみてください。
スライドが切り替わります。

こんな感じでスマホにもPCにも対応できるスライダーが簡単に作れるんですが、これだけだと一見スライダーに見えないぐらいシンプルですよね。
ここからアレンジしていきます。

※サンプル用CSS（大きさ、背景色などを指定しています）

CSS
/* 全体のスタイル */
.swiper-wrapper {
	width: 100%;
	height: 250px;
}
/* 全スライド共通スタイル */
.swiper-slide {
	color: #ffffff;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 250px;
}
/* 4の倍数＋1枚目のスライドのスタイル（1枚目、5枚目…） */
.swiper-slide:nth-child(4n+1) {
	background-color: #EECB27;
}
/* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
.swiper-slide:nth-child(4n+2) {
	background-color: #E13239;
}
/* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
.swiper-slide:nth-child(4n+3) {
	background-color: #1F1762;
}
/* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
.swiper-slide:nth-child(4n+4) {
	background-color: #BEDAE5;
}


4. 縦方向のスライドにする


縦方向のスライドにもできます。
今度は上下に動かしてみてください。ついでに、PCの場合はマウスのホイールスクロールとキーボードの矢印キーでも動かせるようにしてみました。

Slide 1
Slide 2
Slide 3
Slide 4

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	direction: 'vertical',
	mousewheel: {
		forceToAxis: false,
		invert: false
	},
	keyboard: true
});
ハイライト部分が基本の要素に追加したコードです。
※HTML、CSSは3. 基本の要素と同じ

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
direction'horizontal'横方向に移動するスライドを作る
'vertical'縦方向に移動するスライドを作る
keyboardtrueキーボードで操作できるようにする
falseキーボードでの操作不可
mousewheel
パラメータ取り得る値
（省略時は赤字）		備考
forceToAxistrueスライドの移動方向とホイールの動かす方向が合っている場合のみ動かす
falseスライドの移動方向とホイールの動かす方向を考慮しない（例：横スライドでも上下のホイールスクロールで移動可能）
inverttrueホイールのスクロール方向とスライドの移動方向を反転させる（例：上方向にホイールスクロールするとスライドが下に移動する）
falseホイールのスクロール方向にスライドが移動する。
mousewheelのパラメータが初期値のままでよければ、mousewheel: trueと書くだけでもホイールスクロールが有効になります。


5. 前・次ボタンをつける


Slide 1
Slide 2
Slide 3
Slide 4

HTML
<!-- Swiper START -->
<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 class="swiper-slide">Slide 4</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->
JavaScript
var mySwiper = new Swiper('.swiper-container', {
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	}
});
※CSSは3. 基本の要素と同じ

パラメータ解説

navigation
パラメータ取り得る値
（省略時は赤字）		備考
nextEl次ページボタンのセレクタ名を指定
prevEl前ページボタンのセレクタ名を指定
ボタンの色を変えたり、画像に変更したりというカスタマイズも可能です。
やり方は別ページで解説しています。
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超...
https://garigaricode.com/swiper_navigation
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。というわけで、早速カスタマイズしていきましょう。 1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2 Slide 3 Slide 4 var mySwiper11 = new Swiper('.sample11', { navigation: { nextEl: '.nextsample11', prevEl: '.prevsample11',...
ガリガリコード
 


6. スライドの移動速度を変える


すぐ上のサンプルと、前・次ボタンを押したときのスライドが切り替わる速度を比べてみてください。

Slide 1
Slide 2
Slide 3
Slide 4

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	speed: 3000,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	}
});
※HTMLは5. 前・次ボタンをつける、CSSは3. 基本の要素と同じ

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
speed300等の数値スライドの切り替わる速度を数値で指定（単位：ms）



7. 逆方向に進むスライドを作る


通常のスライダーは左から右に向かって1、2、3…と進みますが、逆に右から左に向かって進むスライドを作る場合。

Slide 1
Slide 2
Slide 3
Slide 4

HTML
<!-- Swiper START -->
<div class="swiper-container" 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>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->
※JavaScriptは5. 前・次ボタンをつける、CSSは3. 基本の要素と同じ

これはJavaScriptではなく、HTMLに要素を追加します。
縦方向のスライド時は機能しません。


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


ページネーションがあると、何スライド中今何スライド目を見ているのかがわかりやすくなります。

Slide 1
Slide 2
Slide 3
Slide 4

HTML
<!-- Swiper START -->
<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 class="swiper-slide">Slide 4</div>
	</div>
	<div class="swiper-pagination"></div>
</div>
<!-- Swiper END -->
JavaScript
var mySwiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});
※CSSは3. 基本の要素と同じ

パラメータ解説

pagination
パラメータ取り得る値
（省略時は赤字）		備考
elページネーションのセレクタ名を指定
type'bullets'○ ● ● ● … 形式
'fraction'何分の何形式
'progressbar'プログレスバー形式
'custom'カスタム形式
clickabletruetype: 'bullets'の時のみ有効。○ ● ● ● … の●クリックで直接そのスライドに移動できる
false●クリックで移動しない
上のサンプルはtype: 'bullets'ですが、他を設定すると下記のようになります。

'fraction'
Slide 1
Slide 2
Slide 3
Slide 4

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination',
		type: 'fraction'
	}
});

'progressbar'
Slide 1
Slide 2
Slide 3
Slide 4

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination',
		type: 'progressbar'
	}
});

'custom'は合わせて書式も設定する必要があります。
ページネーション全般のカスタマイズ方法と併せて、詳細は別ページで。
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超...
https://garigaricode.com/swiper_navigation
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。というわけで、早速カスタマイズしていきましょう。 1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2 Slide 3 Slide 4 var mySwiper11 = new Swiper('.sample11', { navigation: { nextEl: '.nextsample11', prevEl: '.prevsample11',...
ガリガリコード
 


9. スクロールバーを付ける


Slide 1
Slide 2
Slide 3
Slide 4

HTML
<!-- Swiper START -->
<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 class="swiper-slide">Slide 4</div>
	</div>
	<div class="swiper-scrollbar"></div>
</div>
<!-- Swiper END -->
JavaScript
var mySwiper = new Swiper('.swiper-container', {
	scrollbar: {
		el: '.swiper-scrollbar',
		hide: false,
		draggable: true
	}
});
※CSSは3. 基本の要素と同じ

パラメータ解説

scrollbar
パラメータ取り得る値
（省略時は赤字）		備考
elスクロールバーのセレクタ名を指定
hidetrue操作時以外はスクロールバーを隠す
false常にスクロールバーが表示される
draggabletrueスクロールバーを直接操作してスライドを移動できるようにする
falseスクロールバーの直接操作不可（スワイプ等でスライダーを動かした時に連動して動くのみ）
スクロールバーのカスタマイズ方法も別ページで解説しています。
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超...
https://garigaricode.com/swiper_navigation
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。というわけで、早速カスタマイズしていきましょう。 1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2 Slide 3 Slide 4 var mySwiper11 = new Swiper('.sample11', { navigation: { nextEl: '.nextsample11', prevEl: '.prevsample11',...
ガリガリコード
 





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


各スライドの高さがバラバラの場合でも、自動で前・次ページボタンやページネーションの位置を合わせることができます。
下記の例では、各スライドの高さをスタイルシートで変更しています。

Slide 1
Slide 2
Slide 3
Slide 4

HTML
<!-- Swiper START -->
<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 class="swiper-slide">Slide 4</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
	<div class="swiper-pagination"></div>
</div>
<!-- Swiper END -->
JavaScript
var mySwiper = new Swiper('.swiper-container', {
	autoHeight: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
autoHeighttrueスライドの高さに合わせてSwiperの高さを変える
falseスライドの高さに合わせてSwiperの高さを変更しない
※CSSは3. 基本の要素と同じものに下記を追加
CSS
/* 4の倍数＋1枚目のスライドの高さ（1枚目、5枚目…） */
.swiper-slide:nth-child(4n+1) {
	height: 250px;
	line-height: 250px;
}
/* 4の倍数＋2枚目のスライドの高さ（2枚目、6枚目…） */
.swiper-slide:nth-child(4n+2) {
	height: 100px;
	line-height: 100px;
}
/* 4の倍数＋3枚目のスライドの高さ（3枚目、7枚目…） */
.swiper-slide:nth-child(4n+3) {
	height: 200px;
	line-height: 200px;
}
/* 4の倍数＋4枚目のスライドの高さ（4枚目、8枚目…） */
.swiper-slide:nth-child(4n+4) {
	height: 150px;
	line-height: 150px;
}



11. 最初に表示するスライドを指定する


Slide 1
Slide 2
Slide 3
Slide 4

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	initialSlide: 2,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});
※HTMLは10. 自動でスライドの高さに合わせる、CSSは3. 基本の要素と同じ

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
initialSlide0等の数値初期表示されるスライドのインデックスを指定。0から始まる。
サンプルのように2を指定した場合は、3枚目（1枚目：0、2枚目：1、3枚目：2）となります。


12. ループさせる


Slide 1
Slide 2
Slide 3
Slide 4

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	loop: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});
※HTMLは10. 自動でスライドの高さに合わせる、CSSは3. 基本の要素と同じ

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
looptrueループする
falseループしない
ここだけ背景色の設定がずれてますね。
loopをtrueにすると最初のスライドの前に最後のスライドが、最後のスライドの後に最初のスライドが複製されます。
ソースで説明するとこういう感じ。

<div class="swiper-wrapper">
    <div class="swiper-slide">Slide 4</div>（見えない）
    <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 class="swiper-slide">Slide 1</div>（見えない）
</div>

こんな感じで<div class="swiper-slide">の数が増えるので、.swiper-slide:nth-child(n)指定が他のとずれるようです。


13. 自動で動かす


Slide 1
Slide 2
Slide 3
Slide 4

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});
※HTMLは10. 自動でスライドの高さに合わせる、CSSは3. 基本の要素と同じ

パラメータ解説

autoplay
パラメータ取り得る値
（省略時は赤字）		備考
delay3000等の数値スライドが動く間隔。単位はms（3000ms＝3秒）
stopOnLastSlidetrue最後のスライドまで行ったら停止する。loop: trueの時はここの設定にかかわらず動き続ける
false最後のスライドまで行くと最初のスライドに戻って再生し続ける
disableOnInteractiontrueユーザーがスライダーを操作したら、自動再生を停止する
falseユーザーがスライダーを操作した後も自動再生し続ける
reverseDirectiontrue最後のスライドから最初のスライドに向かって再生する
false最初のスライドから順に再生する



14. 一度に複数のスライドを表示する


Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});
※HTMLは10. 自動でスライドの高さに合わせるのスライド枚数を12まで追加、CSSは3. 基本の要素と同じ

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
slidesPerView1等の数値、または'auto'一度に表示するスライド数を指定。'auto'の時はスライドの大きさ次第。
loopedSlides数値（loopパラメータの説明も参照）
slidesPerView: 'auto'かつ loop: trueの場合は必須。最初のスライドの前、最後のスライドの後に複製される非表示のスライド数を設定する。総スライド数の半分以上の値を指定しておけばOK。



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


Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	spaceBetween: 10,
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});
※HTMLは10. 自動でスライドの高さに合わせるのスライド枚数を12まで追加、CSSは3. 基本の要素と同じ

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
spaceBetween0等の数値スライドの間隔を指定（単位：px）
両端のスライドにのみ余白をつけたい場合はこんなパラメータもあります。
パラメータ取り得る値
（省略時は赤字）		備考
slidesOffsetBefore0等の数値最初のスライドの前に追加される空白（単位：px）
slidesOffsetAfter0等の数値最後のスライドの後に追加される空白（単位：px）
slidesOffsetBefore、slidesOffsetAfterの注意点は、あくまでも「最初」または「最後」のスライドにのみ空白が付くことです。
スライド表示領域の両端に付くものではありません。
サンプルはこうなります。
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	slidesOffsetBefore: 50,
	slidesOffsetAfter: 50,
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});
スライド表示領域の両端に空白を取りたい場合（スライドの外側に前・次ボタンを配置したい場合など）は別ページで解説しています。
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超...
https://garigaricode.com/swiper_navigation
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。というわけで、早速カスタマイズしていきましょう。 1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2 Slide 3 Slide 4 var mySwiper11 = new Swiper('.sample11', { navigation: { nextEl: '.nextsample11', prevEl: '.prevsample11',...
ガリガリコード
 


16. 一度に動かすスライド数を設定する


3枚同時に動かします。

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	slidesPerGroup: 3,
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});
※HTMLは10. 自動でスライドの高さに合わせるのスライド枚数を12まで追加、CSSは3. 基本の要素と同じ

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
slidesPerGroup1等の数値一度に動かすスライドの枚数
ページネーションの総数は自動で計算されます。


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


Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	centeredSlides: true,
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});
※HTMLは10. 自動でスライドの高さに合わせるのスライド枚数を12まで追加、CSSは3. 基本の要素と同じ

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
slidesPerViewtrue現在のスライドを中央に表示する
false現在のスライドを左端または上端に表示する



18. スライドが切り替わるときのアニメーションを指定する


Slide 1
Slide 2
Slide 3
Slide 4

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	effect: 'fade',
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});
※HTMLは10. 自動でスライドの高さに合わせる、CSSは3. 基本の要素と同じ

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
effect'slide'次のスライドが流れてくるようなアニメーション
'fade'次のスライドが浮かび上がってくるようなアニメーション
'cube'立体が回転するようなアニメーション
'coverflow'iTunes等Apple風のアニメーション
'flip'平面が回転するようなアニメーション
上のサンプルが'fade'、それより前のサンプルが全部'slide'の場合の動きです。
他を指定したときも見てみましょう。

'cube'
Slide 1
Slide 2
Slide 3
Slide 4

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	effect: 'cube',
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

'coverflow'
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	effect: 'coverflow',
	slidesPerView: 3,
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});
※coverflowのみslidesPerViewも指定しています。
slide、coverflow以外はslidesPerViewの設定にかかわらず1枚表示になるようです。

'flip'
Slide 1
Slide 2
Slide 3
Slide 4

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	effect: 'flip',
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});



19. 一度で好きな位置までスワイプ・スクロールできるようにする


スワイプした時に普通はスライド単位で移動しますが、好きなだけ動かせて好きな位置で止められるようになります。

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12

JavaScript
var mySwiper = new Swiper('.swiper-container', {
	freeMode: true,
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});
※HTMLは10. 自動でスライドの高さに合わせるのスライド枚数を12まで追加、CSSは3. 基本の要素と同じ

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
freeModetrueスライド位置を固定させない
falseスライド位置を固定させる



20. 複数行のスライドにする


Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12

※HTMLは10. 自動でスライドの高さに合わせるのスライド枚数を12まで追加、CSSは3. 基本の要素の一部を下記に変更
CSS
/* 全スライド共通スタイル */
.swiper-slide {
	height: 125px;
	line-height: 125px;
}
JavaScript
var mySwiper = new Swiper('.swiper-container', {
	slidesPerColumn: 2,
	slidesPerColumnFill: 'column',
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
slidesPerColumn1等の数値1列あたりのスライド数（行数）
slidesPerColumnFill'column'（slidesPerColumnが2以上の場合のみ有効）スライド並び順が「列」（縦方向）優先
'row'（slidesPerColumnが2以上の場合のみ有効）「行」（横方向）優先
slidesPerColumnに2以上の値を設定した時は、loop: trueは併用できません。
slidesPerColumnFill: 'column'の場合は、上のサンプルのように

こういった並び順になります。

slidesPerColumnFill: 'row'の場合は、次のようになります。

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12


こんな並び順。

コレジャナイ感ありませんか？
こう

の方がしっくりくるような気がするんですけどね。
この並び方も一手間加えれば実現可能です。
詳細は別ページで。
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超...
https://garigaricode.com/swiper_multirow
このページでは、Swiperを複数行で表示するカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。というわけで、早速カスタマイズしていきましょう。 1. 列（縦方向）優先1. 列（縦方向）優先slidesPerColumnFill: 'column'を指定した時、またはslidesPerColumnFillを省略した時は、こういう並び順になります。Sample.1 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11 Slide 12 var mySwiper1 = new Swiper('.samp...
ガリガリコード


20. 画面幅によってレイアウトを変える


画面幅によって、異なるレイアウトにしてしまうことも可能です。
これはGIFアニメでご覧下さい。


JavaScript
var mySwiper = new Swiper('.swiper-container', {
	slidesPerView: 4,
	slidesPerGroup: 4,
	spaceBetween: 10,
	breakpoints: {
		350: {
			slidesPerView: 3,
			slidesPerGroup: 3,
			spaceBetween: 0
		},
		300: {
			slidesPerView: 1,
			slidesPerGroup: 1,
			spaceBetween: 0
		}
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
breakpoints数値画面サイズを指定し、{ }内に画面サイズごとに変更したいパラメータを記載する
上記のサンプルでは、
画面幅
～300301～350351～
一度に表示するスライド数1枚3枚4枚
一度に移動するスライド数1枚ずつ3枚ずつ4枚ずつ
スライド間の余白0px0px10px
…という風になります。

さて、このbreakpointsですがいくつか注意点があります。
まず、breakpointsはスクロールバーを含む画面サイズです。
Swiperのサイズでないことに注意。

また、breakpointsの中ですべてのパラメータを変えられるわけではないことにも注意。
サンプルのようにslidesPerView、slidesPerGroup、spaceBetweenなどは設定できますが、slidesPerColumn、loop、direction、effectなどはbreakpointで変更することはできません。

…が、breakpointで変更できないパラメータをどうにかして条件次第で変更したいという場合、Swiperを再作成するという方法があります。
別ページで触れていますので、ご参考までに。
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超...
https://garigaricode.com/swiper_multirow#go-to-5-e3818ae381bee38191efbc9aswipere381aee5868de4bd9ce68890e381abe381a4e38184e381a6
このページでは、Swiperを複数行で表示するカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。というわけで、早速カスタマイズしていきましょう。 1. 列（縦方向）優先1. 列（縦方向）優先slidesPerColumnFill: 'column'を指定した時、またはslidesPerColumnFillを省略した時は、こういう並び順になります。Sample.1 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11 Slide 12 var mySwiper1 = new Swiper('.samp...
ガリガリコード
 





22. 1ページに複数のSwiperを設置する


ここまでのサンプルコードは1ページに1つだけSwiperを設置する場合を想定したものでしたが、このページのように複数設置したい場合は下記のようにします。

HTML
<!-- 1個目のSwiper START -->
	<!-- Swiper START -->
	<div class="swiper-container swiper1">
		<!-- メイン表示部分 -->
		<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-button-prev prev1"></div>
		<div class="swiper-button-next next1"></div>
		<div class="swiper-pagination page1"></div>
	</div>
	<!-- Swiper END -->
<!-- 1個目のSwiper END -->

<!-- 2個目のSwiper START -->
	<!-- Swiper START -->
	<div class="swiper-container swiper2">
		<!-- メイン表示部分 -->
		<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-button-prev prev2"></div>
		<div class="swiper-button-next next2"></div>
		<div class="swiper-pagination page2"></div>
	</div>
	<!-- Swiper END -->
<!-- 2個目のSwiper END -->

<div class="swiper-container swiper1"> こんな感じで基本の要素にクラスを追加して、そのクラスに対してSwiperを定義します。

JavaScript
//1個目のSwiper
var mySwiper1 = new Swiper('.swiper1', {
	navigation: {
		nextEl: '.next1',
		prevEl: '.prev1'
	},
	pagination: {
		el: '.page1',
		type: 'bullets',
		clickable: true
	}
});

//2個目のSwiper
var mySwiper2 = new Swiper('.swiper2', {
	navigation: {
		nextEl: '.next2',
		prevEl: '.prev2'
	},
	pagination: {
		el: '.page2',
		type: 'bullets',
		clickable: true
	}
});
※CSSは3. 基本の要素と同じ

これを応用すると、こんなスライダーも作れます。

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8

大きいSwiperの下に小さなSwiperを置いて、2つを連動させています。

HTML
<!-- 1個目のSwiper START -->
	<!-- Swiper START -->
	<div class="swiper-container swiper1">
		<!-- メイン表示部分 -->
		<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 class="swiper-slide">Slide 5</div>
			<div class="swiper-slide">Slide 6</div>
			<div class="swiper-slide">Slide 7</div>
			<div class="swiper-slide">Slide 8</div>
		</div>
		<div class="swiper-button-prev prev1"></div>
		<div class="swiper-button-next next1"></div>
	</div>
	<!-- Swiper END -->
<!-- 1個目のSwiper END -->

<!-- 2個目のSwiper START -->
	<!-- Swiper START -->
	<div class="swiper-container swiper2">
		<!-- メイン表示部分 -->
		<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 class="swiper-slide">Slide 5</div>
			<div class="swiper-slide">Slide 6</div>
			<div class="swiper-slide">Slide 7</div>
			<div class="swiper-slide">Slide 8</div>
		</div>
	</div>
	<!-- Swiper END -->
<!-- 2個目のSwiper END -->
※CSSは3. 基本の要素に下記を追加
CSS
/* 2個目のSwiper全体のスタイル */
.swiper2 {
	height: 80px;
	margin-top: 10px;
}
/* 2個目のSwiperのスライドのスタイル */
.swiper2 .swiper-slide {
	height: 80px;
	line-height: 80px;
	-webkit-filter: brightness(0.5);
	filter: brightness(0.5);
}
/* 2個目のSwiperの現在のスライドのスタイル */
.swiper2 .swiper-slide-active {
	-webkit-filter: brightness(1);
	filter: brightness(1);
}
JavaScript
var mySwiper1 = new Swiper('.swiper1', {
	spaceBetween: 10,
	navigation: {
		nextEl: '.next1',
		prevEl: '.prev1'
	}
});

var mySwiper2 = new Swiper('.swiper2', {
	slideToClickedSlide: true,
	controller: {
		control: mySwiper1,
		inverse: false,
		by: 'slide'
	},
	spaceBetween: 10,
	slidesPerView: 3,
	slideToClickedSlide: true
});
mySwiper1.controller.control = mySwiper2;

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
slideToClickedSlidetrueスライドクリックでそのスライドに移動する
falseスライドクリックで移動しない（前・次ボタン、ページネーション、スワイプでのみ移動）
2つのSwiperを連動させるには、controllerを使います。
controller
パラメータ取り得る値
（省略時は赤字）		備考
control連動させるSwiperの定義名を指定
inversetrue連動させるSwiperの制御方向を逆向きにする
false連動させるSwiperの制御方向を標準にする
by'slide'連動させるSwiperをスライド単位で制御する
'container'連動させるSwiperをコンテナ単位で制御

1個目のSwiperは、一番最後にcontrol設定を行っています。
mySwiper1.controller.control = mySwiper2;
は、
var mySwiper1 = new Swiper('.swiper1', {
   controller: {
       control: mySwiper2
   }
});
を違う書き方で書いているだけ。

なぜ1個目と2個目のSwiperでcontollerの指定方法が違っているかというとですね、コードは上から順番に実行されるため、1個目のSwiperを作っている最中は2個目のSwiperは定義前なのでまだ存在しません。
この状態で連携しようとしても「そんなものないですよ」という判断になってしまいます。
2個目のSwiperを作っている時には、1個目のSwiperはすでに存在しているため、var mySwiper2 = … の中で書くことができます。
なので、2個目のSwiperも作り終わってから1個目のcontoller指定をしてやるとうまくいきます。


23. 動的にスライドを追加・削除する


Slide 1
Slide 2
Slide 3
Slide 4

Swiper下のボタンをボタンを押しまくってみてください。
「2番目に追加/削除」はその時点での2番目にスライドを追加/削除します（「最初に追加」した分も考慮）。

※HTMLは10. 自動でスライドの高さに合わせるに下記を追加、CSSは3. 基本の要素と同じ（スライド追加／削除ボタン部分は省略）
HTML
<!--コントロールボタン START-->
	<div>
		<a class="beforeadd">最初に追加</a>
		<a class="secondadd">2番目に追加</a>
		<a class="afteradd">最後に追加</a>
		<a class="secondremove">2番目を削除</a>
		<a class="removeall">全スライドを削除</a>
	</div>
<!--コントロールボタン END-->
JavaScript
var mySwiper = new Swiper('.swiper-container', {
	centeredSlides: true,
	slidesPerView: 3,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});
var start = 1;
var end = 4;
//最初に追加
document.querySelector('.beforeadd').addEventListener('click', function (e) {
	e.preventDefault();
	mySwiper.prependSlide('<div class="swiper-slide">Slide ' + (--start) + '</div>');
});
//2番目に追加
document.querySelector('.secondadd').addEventListener('click', function (e) {
	e.preventDefault();
	mySwiper.addSlide(1, '<div class="swiper-slide">2番目に追加</div>');
});
//最後に追加
document.querySelector('.afteradd').addEventListener('click', function (e) {
	e.preventDefault();
	mySwiper.appendSlide('<div class="swiper-slide">Slide ' + (++end) + '</div>');
});
//2番目を削除
document.querySelector('.secondremove').addEventListener('click', function (e) {
	e.preventDefault();
	mySwiper.removeSlide(1);
});
//全スライドを削除
document.querySelector('.removeall').addEventListener('click', function (e) {
	e.preventDefault();
	mySwiper.removeAllSlides();
});

メソッド解説

今回はパラメータじゃなくてメソッド解説。

document.querySelector('…').addEventListener('click', function (e) {
    e.preventDefault();
この部分はSwiper固有メソッドではなく、JavaScriptです。

ここからがSwiper固有メソッド。
mySwiper.prependSlide('…')最初にスライドを追加する。配列にすると一度に複数のスライドを追加できる（例：mySwiper.prependSlide(['…', '…'])）
mySwiper.addSlide(index, '…')指定したインデックスにスライドを追加する。配列にすると一度に複数のスライドを追加できる（例：mySwiper.appendSlide(1, ['…', '…'])）
mySwiper.appendSlide('…')最後にスライドを追加する。配列にすると一度に複数のスライドを追加できる（例：mySwiper.appendSlide(['…', '…'])）
mySwiper.removeSlide(index)指定したインデックスのスライドを削除。配列にすると一度に複数のスライドを削除できる（例：mySwiper.removeSlide([0, 1])）
mySwiper.removeAllSlides()全てのスライドを削除する。引数不要。
.addSlideと.removeSlideについては、インデックスは0から始まることに注意。


24. Parallax効果をつける


Parallaxは、手前と奥の要素の移動速度を変えて、奥行きがあるように錯覚させる効果のこと。

Slide 1
Slide 2
Slide 3
Slide 4

HTML
<!-- Swiper START -->
<div class="swiper-container">
	<!-- 背景画像部分 -->
	<div class="parallax-bg" style="background-image:url(背景画像のURL)" data-swiper-parallax="-23%"></div>
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">
			<div data-swiper-parallax="-300">Slide 1</div>
		</div>
		<div class="swiper-slide">
			<div data-swiper-parallax="-300">Slide 2</div>
		</div>
		<div class="swiper-slide">
			<div data-swiper-parallax="-300">Slide 3</div>
		</div>
		<div class="swiper-slide">
			<div data-swiper-parallax="-300">Slide 4</div>
		</div>
	</div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
	<div class="swiper-pagination"></div>
</div>
<!-- Swiper END -->
JavaScript
var mySwiper = new Swiper('.swiper-container', {
	parallax: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

パラメータ解説

パラメータ取り得る値
（省略時は赤字）		備考
parallaxtrueparallaxをONにする
falseparallaxをOFFにする
CSS
/* 全体のスタイル */
.swiper-wrapper {
	width: 100%;
	height: 250px;
}
/* 全スライド共通スタイル */
.swiper-slide {
	color: #ffffff;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 250px;
}
/* 背景画像部分のスタイル */
.parallax-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 130%;
	height: 100%;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
}
これはこんなこともできるよーという紹介程度にしておきます。


25. トラブルシューティング


うまくいかないときのトラブルシューティングをいくつか。

○○はできる？
下記関連ページもご参照ください。
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超...
https://garigaricode.com/swiper_navigation
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。というわけで、早速カスタマイズしていきましょう。 1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2 Slide 3 Slide 4 var mySwiper11 = new Swiper('.sample11', { navigation: { nextEl: '.nextsample11', prevEl: '.prevsample11',...
ガリガリコード
 
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超...
https://garigaricode.com/swiper_multirow
このページでは、Swiperを複数行で表示するカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。というわけで、早速カスタマイズしていきましょう。 1. 列（縦方向）優先1. 列（縦方向）優先slidesPerColumnFill: 'column'を指定した時、またはslidesPerColumnFillを省略した時は、こういう並び順になります。Sample.1 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11 Slide 12 var mySwiper1 = new Swiper('.samp...
ガリガリコード
それでもダメなら、公式ドキュメント（英語）を参考にするとできるかもしれません。
ここでは見た目ではわからないパラメータの解説は省略しました。
やろうと思えばタッチ・スワイプについてもっと細かな制御を追加したりすることも可能です。

動かない、表示されない
以下の点を確認してみてください。

  • 括弧の開始・終了が対応しているか
  • パラメータとパラメータの間が「,」で区切られているか
  • 「'」（引用符）が必要なパラメータの場合、引用符が抜けていないか
  • 1ページに複数のSwiperを設置していて、クラス名を追加し忘れていないか
    →参照：22. 1ページに複数のSwiperを設置する

スライドの中に別ページへのリンクを配置している時、リンクの反応が悪い（押しにくい、押しても遷移しない）
Google Chromeでよく発生します。
そういう場合は下記のパラメータを追加。
JavaScript
var mySwiper = new Swiper('.swiper-container', {
	preventClicks: false,
	preventClicksPropagation: false
});
上記パラメータは、意図しないクリックでの誤操作を防ぐためのもの。
省略時はtrueに設定されていますが、Chromeでは効き過ぎるようなので、これをfalseにしてあげると反応しやすくなります。

Swiperが異常に横に長くなる
こんな感じでしょうか。

※範囲がわかりやすいように囲み線をつけています。

この画像では、Swiperが親要素も画面幅も無視してはみだしていますよね。

この現象は、Swiperの幅をうまく計算できないときに起こります。
例えば上の画像の場合、ソースはこんな感じでした。

<div style="display:grid;">
   <div class="swiper-container">
   …
   </div>
   <div>…</div>
</div>

display:gridやflexを使っていて、幅指定をしていないか「fr」を使っている場合に発生します。
これを回避するには、単位に「fr」を使わずにカラムの幅を指定します。
例えば、上のソースを修正するとしたらこんな感じになります。

<div style="display:grid;grid-template-columns:calc(100% - 30px) 30px;">
   <div class="swiper-container">
   …
   </div>
   <div>…</div>
</div>


※範囲がわかりやすいように囲み線をつけています。

これでSwiperが画面幅にも親要素にもおさまり、かつgridレイアウトも実現できます。
横に伸びる時は、SwiperかSwiperの親要素の幅指定を見直して見てください。
親の親が原因、ということもありますので親を見直してもうまくいかない場合は、さらにその親も確認を。


関連記事
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超...
https://garigaricode.com/swiper_navigation
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。というわけで、早速カスタマイズしていきましょう。 1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2 Slide 3 Slide 4 var mySwiper11 = new Swiper('.sample11', { navigation: { nextEl: '.nextsample11', prevEl: '.prevsample11',...
ガリガリコード
 
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超...
https://garigaricode.com/swiper_multirow
このページでは、Swiperを複数行で表示するカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。というわけで、早速カスタマイズしていきましょう。 1. 列（縦方向）優先1. 列（縦方向）優先slidesPerColumnFill: 'column'を指定した時、またはslidesPerColumnFillを省略した時は、こういう並び順になります。Sample.1 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11 Slide 12 var mySwiper1 = new Swiper('.samp...
ガリガリコード



ぱんこ

おなごだよ
SE・プログラマーやってたよ
今は事務員のはずだけど開発もさせられるよ

7 Comments

    1. コメントありがとうございます。
      気づくのが遅くなり申し訳ありません。
      導入部分の。…すみません、どこのことでしょうか…

      返信

  2. 「.jsは内の方が多少ページの描画が速くなります。（Swiper設置箇所より前に読み込む）」と記載ありますが、
    最新版で試してみたところ、Swiper設置箇所より後に読み込まないと動作しませんでした。

    返信

    1. コメントありがとうございます。
      ちょっと今こちらで検証する時間がないのですが、教えていただいた内容を記事中に反映しておきます。
      ありがとうございました。

      返信

  3. とても分かりやすく、面白い記事でした😀
    そして、なかなか実装出来なかったスライドショーを
    実装できました！！！！！！！！！
    ありがとうございます！！！！！！！

    返信

コメントを残す

メールアドレスが公開されることはありません。

Close
Close