garigaricode.com
Open in
urlscan Pro
2606:4700:3034::6815:418d
Public Scan
URL:
https://garigaricode.com/swiper/
Submission: On January 22 via api from US — Scanned from DE
Submission: On January 22 via api from US — Scanned from DE
Form analysis 3 forms found in the DOM
GET https://garigaricode.com/
<form role="search" method="get" class="search-form" action="https://garigaricode.com/">
<label>
<span class="screen-reader-text">検索:</span>
<input type="search" class="search-field" placeholder="検索…" value="" name="s">
</label>
<input type="submit" class="search-submit" value="検索">
</form>GET https://garigaricode.com/
<form method="get" class="tie-popup-search-form" action="https://garigaricode.com/">
<input class="tie-popup-search-input is-ajax-search" inputmode="search" type="text" name="s" title="検索" autocomplete="off" placeholder="検索">
<button class="tie-popup-search-submit" type="submit">
<span class="tie-icon-search tie-search-icon" aria-hidden="true"></span>
<span class="screen-reader-text">検索</span>
</button>
</form><form id="jp-carousel-comment-form">
<label for="jp-carousel-comment-form-comment-field" class="screen-reader-text">コメントをどうぞ</label>
<textarea name="comment" class="jp-carousel-comment-form-field jp-carousel-comment-form-textarea" id="jp-carousel-comment-form-comment-field" placeholder="コメントをどうぞ"></textarea>
<div id="jp-carousel-comment-form-submit-and-info-wrapper">
<div id="jp-carousel-comment-form-commenting-as">
<fieldset>
<label for="jp-carousel-comment-form-email-field">メール</label>
<input type="text" name="email" class="jp-carousel-comment-form-field jp-carousel-comment-form-text-field" id="jp-carousel-comment-form-email-field">
</fieldset>
<fieldset>
<label for="jp-carousel-comment-form-author-field">名前</label>
<input type="text" name="author" class="jp-carousel-comment-form-field jp-carousel-comment-form-text-field" id="jp-carousel-comment-form-author-field">
</fieldset>
<fieldset>
<label for="jp-carousel-comment-form-url-field">サイト</label>
<input type="text" name="url" class="jp-carousel-comment-form-field jp-carousel-comment-form-text-field" id="jp-carousel-comment-form-url-field">
</fieldset>
</div>
<input type="submit" name="submit" class="jp-carousel-comment-form-button" id="jp-carousel-comment-form-button-submit" value="コメントを送信">
</div>
</form>Text Content
* Menu
* Home
* Web制作
* WordPress / PHP
* CSS
* Java Script / JQuery
* Webサービス
* IT
* ランダム表示
* 検索
Home > Web制作 > Java Script / JQuery >
【ver.11対応】サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（基礎編）
Java Script / JQuery
【VER.11対応】サンプル付き！簡単にスライドを作れるライブラリSWIPER.JS超解説（基礎編）
あまみつ Follow on X 2018年8月1日Last Updated: 2023年12月23日
5,356 読み終わるまで約 1 時間
Share
Facebook Twitter はてなブックマーク LINE Pocket Share via Email Print
* 1. Swiperとは
* 2. 使うための準備
* 3. 基本の要素
* 4. 縦方向のスライドにする
* 5. 前・次ボタンをつける
* 6. スライドの移動速度を変える
* 7. 逆方向に進むスライドを作る
* 8. ページネーションをつける
* 9. スクロールバーを付ける
* 10. 自動でスライドの高さに合わせる
* 11. 最初に表示するスライドを指定する
* 12. ループさせる
* 13. 自動で動かす
* 14. 一度に複数のスライドを表示する
* 15. スライドの間隔を設定する
* 16. 一度に動かすスライド数を設定する
* 17. 現在のスライドを中央に表示する
* 18. スライドが切り替わるときのアニメーションを指定する
* 19. 一度で好きな位置までスワイプ・スクロールできるようにする
* 20. 複数行のスライドにする
* 21. 画面幅によってレイアウトを変える
* 22. 1ページに複数のSwiperを設置する
* 23. 動的にスライドを追加・削除する
* 24. Parallax効果をつける
* 25. スライドをズームさせる
* 26. タイマーを表示する
* 27. トラブルシューティング
目次
* 1. Swiperとは
* 2. 使うための準備
* 3. 基本の要素
* 4. 縦方向のスライドにする
* 5. 前・次ボタンをつける
* 6. スライドの移動速度を変える
* 7. 逆方向に進むスライドを作る
* 8. ページネーションをつける
* 9. スクロールバーを付ける
* 10. 自動でスライドの高さに合わせる
* 11. 最初に表示するスライドを指定する
* 12. ループさせる
* 13. 自動で動かす
* 14. 一度に複数のスライドを表示する
* 15. スライドの間隔を設定する
* 16. 一度に動かすスライド数を設定する
* 17. 現在のスライドを中央に表示する
* 18. スライドが切り替わるときのアニメーションを指定する
* 19. 一度で好きな位置までスワイプ・スクロールできるようにする
* 20. 複数行のスライドにする
* 21. 画面幅によってレイアウトを変える
* 22. 1ページに複数のSwiperを設置する
* 23. 動的にスライドを追加・削除する
* 24. Parallax効果をつける
* 25. スライドをズームさせる
* 26. タイマーを表示する
* 27. トラブルシューティング
1. SWIPERとは
スライダー（カルーセル）が作れるJavaScriptライブラリです。
しかもPCでもスマホでも使えて、レスポンシブ対応可能！
jQueryにも依存せず、カスタマイズの自由度も高く、見た目も美しいスライダーがサクッとできちゃう。
マクドナルド、ディズニー、トヨタ、BMW、Adobeなど様々な有名企業に導入されています。
でも、公式ドキュメントは英語のみ…。
今回は、そんなSwiperについて解説していきます。
ココナラで設置代行始めました！
サイト、ブログへのスライドショーの設置代行承ります Swiper...
https://coconala.com/services/3105388
ご自身のホームページやブログに、見栄えするスライドショーを設置いたします。HTML/Wordpress/PHP等様々な形式に対応。動作イメージは動画をご確認くだ...
ココナラ
（外部サイト）
以下を読むのがめんどくさい人、どうしてもうまくいかない人は、こちらもご検討ください。
2. 使うための準備
CDNからライブラリを読み込む方法が楽でおすすめ。
下記のライブラリとスタイルシートを、Swiperを設置したいHTMLに追加します。
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js">
クリップボードにコピーする
最新版は公式ページを確認してください。
Use Swiper from CDN - Swiper
※バージョンが変わるとパラメータの書き方が変わることがあるので注意。
本記事は11.0.5（2023年11月22日リリース版）対応の内容です。
.cssは<HEAD></HEAD>内に追加します。
.jsは<BODY></BODY>内の方が多少ページの描画が速くなります。（Swiper設置箇所より前に読み込む）
自分のサーバーに置きたい人は、GitHubからダウンロードできます。
Releases · nolimits4web/swiper · GitHub
swiper.min（.js/.css）とswiper（.js/.css）がありますが、minの方は空白やコメントなどを除去した圧縮版です。
機能はどちらも変わりませんので、そのまま読み込んで使うだけなら軽いminの方で。
3. 基本の要素
HTML
<!-- Swiper START -->
<div class="swiper">
<!-- メイン表示部分 -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
</div>
<!-- Swiper END -->
クリップボードにコピーする
JavaScript
const mySwiper = new Swiper('.swiper', {
});
クリップボードにコピーする
どんなレイアウトにするにしても、絶対省略できないのがこの部分。
これを実際動かすとこうなります。
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
const mySwiper = new Swiper('.swiper', {
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">
<!-- メイン表示部分 -->
<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
const mySwiper = new Swiper('.swiper', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
});
クリップボードにコピーする
※CSSは3. 基本の要素と同じ
パラメータ解説
navigation パラメータ取り得る値
（省略時は赤字）備考 nextEl次ページボタンのセレクタ名を指定 prevEl前ページボタンのセレクタ名を指定
ボタンの色を変えたり、画像に変更したりというカスタマイズも可能です。
やり方は別ページで解説しています。
【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...
https://garigaricode.com/swiper_navigation
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 ココナラで設置代行始めました！以下を読むのがめんどくさい人、どうしてもうまくいかない人は、こちらもご検討ください。
1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2
Slide 3 Slide 4 const mySwiper11 = new Swiper('.sample11', { navigation:...
ガリガリコード
1 Post
48 Pockets
6. スライドの移動速度を変える
すぐ上のサンプルと、前・次ボタンを押したときのスライドが切り替わる速度を比べてみてください。
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
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" 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">
<!-- メイン表示部分 -->
<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
const mySwiper = new Swiper('.swiper', {
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
1 / 4
JavaScript
const mySwiper = new Swiper('.swiper', {
pagination: {
el: '.swiper-pagination',
type: 'fraction'
}
});
クリップボードにコピーする
'progressbar'
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
pagination: {
el: '.swiper-pagination',
type: 'progressbar'
}
});
クリップボードにコピーする
'custom'は合わせて書式も設定する必要があります。
ページネーション全般のカスタマイズ方法と併せて、詳細は別ページで。
【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...
https://garigaricode.com/swiper_navigation
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 ココナラで設置代行始めました！以下を読むのがめんどくさい人、どうしてもうまくいかない人は、こちらもご検討ください。
1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2
Slide 3 Slide 4 const mySwiper11 = new Swiper('.sample11', { navigation:...
ガリガリコード
1 Post
48 Pockets
9. スクロールバーを付ける
Slide 1
Slide 2
Slide 3
Slide 4
HTML
<!-- Swiper START -->
<div class="swiper">
<!-- メイン表示部分 -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
<!-- Swiper END -->
クリップボードにコピーする
JavaScript
const mySwiper = new Swiper('.swiper', {
scrollbar: {
el: '.swiper-scrollbar',
hide: false,
draggable: true
}
});
クリップボードにコピーする
※CSSは3. 基本の要素と同じ
パラメータ解説
scrollbar パラメータ取り得る値
（省略時は赤字）備考 elスクロールバーのセレクタ名を指定 hidetrue操作時以外はスクロールバーを隠す false常にスクロールバーが表示される
draggabletrueスクロールバーを直接操作してスライドを移動できるようにする
falseスクロールバーの直接操作不可（スワイプ等でスライダーを動かした時に連動して動くのみ）
スクロールバーのカスタマイズ方法も別ページで解説しています。
【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...
https://garigaricode.com/swiper_navigation
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 ココナラで設置代行始めました！以下を読むのがめんどくさい人、どうしてもうまくいかない人は、こちらもご検討ください。
1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2
Slide 3 Slide 4 const mySwiper11 = new Swiper('.sample11', { navigation:...
ガリガリコード
1 Post
48 Pockets
10. 自動でスライドの高さに合わせる
各スライドの高さがバラバラの場合でも、自動で前・次ページボタンやページネーションの位置を合わせることができます。
Slide 1
Slide 2
Slide 3
Slide 4
HTML
<!-- Swiper START -->
<div class="swiper">
<!-- メイン表示部分 -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper END -->
クリップボードにコピーする
JavaScript
const mySwiper = new Swiper('.swiper', {
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
const mySwiper = new Swiper('.swiper', {
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
const mySwiper = new Swiper('.swiper', {
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ループしない
このスライド、一番端まで行ってループで逆側に戻ると、背景色の設定がおかしくなります。
これはサンプルが間違っているわけではなく、ループ可にするとSwiper側で動的にスライドの順番を入れ替えているから。
たとえば、Slide1→Slide2→Slide3→Slide4→Slide1→Slide2と移動したとき、HTML上ではどういう状態かというと…
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
こんな感じ。 Slide2が4番目に来ます。 さらに→Slide3と遷移すると、
<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>
こうなる。
スライドの並び順が初期と変わってしまうので、「n番目のスライドに適用する」系のcss（.swiper-slide:nth-child()など）は意図しない結果になります。
これを回避するには、各スライドに個別でスタイルを設定します。
Slide 1
Slide 2
Slide 3
Slide 4
HTML
<!-- Swiper START -->
<div class="swiper">
<!-- メイン表示部分 -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide" style="background-color: #EECB27;">Slide 1</div>
<div class="swiper-slide" style="background-color: #E13239;">Slide 2</div>
<div class="swiper-slide" style="background-color: #1F1762;">Slide 3</div>
<div class="swiper-slide" style="background-color: #BEDAE5;">Slide 4</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper END -->
クリップボードにコピーする
13. 自動で動かす
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
pauseOnMouseEnter: 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ユーザーがスライダーを操作した後も自動再生し続ける pauseOnMouseEntertrueマウスが乗っている状態なら自動再生を一時停止する
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
const mySwiper = new Swiper('.swiper', {
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'の時はスライドの大きさ次第。
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
const mySwiper = new Swiper('.swiper', {
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
const mySwiper = new Swiper('.swiper', {
slidesOffsetBefore: 50,
slidesOffsetAfter: 50,
slidesPerView: 3,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
クリップボードにコピーする
スライド表示領域の両端に空白を取りたい場合（スライドの外側に前・次ボタンを配置したい場合など）は別ページで解説しています。
【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...
https://garigaricode.com/swiper_navigation
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 ココナラで設置代行始めました！以下を読むのがめんどくさい人、どうしてもうまくいかない人は、こちらもご検討ください。
1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2
Slide 3 Slide 4 const mySwiper11 = new Swiper('.sample11', { navigation:...
ガリガリコード
1 Post
48 Pockets
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
const mySwiper = new Swiper('.swiper', {
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
const mySwiper = new Swiper('.swiper', {
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. 基本の要素と同じ
パラメータ解説
パラメータ取り得る値
（省略時は赤字）備考 centeredSlidestrue現在のスライドを中央に表示する false現在のスライドを左端または上端に表示する
18. スライドが切り替わるときのアニメーションを指定する
Slide 1
Slide 2
Slide 3
Slide 4
↑ flip
Slide 1
Slide 2
Slide 3
Slide 4
↑ cards
パラメータ解説
パラメータ取り得る値
（省略時は赤字）備考 effect'slide'次のスライドが流れてくるようなアニメーション 'fade'次のスライドが浮かび上がってくるようなアニメーション
'cube'立体が回転するようなアニメーション 'coverflow'iTunes等Apple風のアニメーション 'flip'平面が回転するようなアニメーション
'cards'カードを次々にめくるようなアニメーション 'creative'自由に動きを設定できる
一通り紹介します。
'slide'
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
effect: 'slide',
speed: 2000,
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'
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
effect: 'fade',
speed: 2000,
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. 基本の要素と同じ
全スライドが同じ大きさの場合はあまり気にしなくてもいいんですが、デフォルトのままだとサイズが異なるスライドが混ざっている場合に、前のスライドの残像が残ってしまうことがあります。
Slide 1
Slide 2
Slide 3
Slide 4
こういう場合、fadeEffectパラメータのcrossFadeをtrueにすると解決します。（省略時初期値：false）
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
effect: 'fade',
fadeEffect: {
crossFade: true
},
speed: 2000,
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. 基本の要素と同じ
'cube'
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
effect: 'cube',
speed: 2000,
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. 基本の要素と同じ
影の設定をいろいろと変更できます。
わかりやすいように、背景を白にしてみるとデフォルトではこうですが…
Slide 1
Slide 2
Slide 3
Slide 4
↓下の影（shadow）とスライドに付く影（slideShadows）を消した例
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
effect: 'cube',
cubeEffect: {
shadow: false,
slideShadows: false,
},
speed: 2000,
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
}
});
クリップボードにコピーする
↓影との距離（shadowOffset）と大きさ（shadowScale）を指定した例
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
effect: 'cube',
cubeEffect: {
shadowOffset: 100,
shadowScale: 0.2,
},
speed: 2000,
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
const mySwiper = new Swiper('.swiper', {
effect: 'coverflow',
slidesPerView: 3,
speed: 2000,
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. 基本の要素と同じ
※coverflowのみslidesPerViewも指定します。
slide、coverflow以外はslidesPerViewの設定にかかわらず1枚表示になるようです。
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
↓影なし（slideShadows）、前後のスライドの角度変更（rotate）、前後のスライドの拡大率変更（scale）、スライドの間隔変更（stretch）
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
const mySwiper = new Swiper('.swiper', {
effect: 'coverflow',
slidesPerView: 3,
coverflowEffect: {
slideShadows: false,
rotate: 0,
scale: 0.5,
stretch: 80
},
speed: 2000,
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
}
});
クリップボードにコピーする
↓奥行き変更（depth）、効果乗数変更（modifier）
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
const mySwiper = new Swiper('.swiper', {
effect: 'coverflow',
slidesPerView: 3,
coverflowEffect: {
depth: 500,
modifier: 2,
},
speed: 2000,
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
}
});
クリップボードにコピーする
'flip'
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
effect: 'flip',
speed: 2000,
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. 基本の要素と同じ
flipも回転時にスライド面に影が付くのを消すことができます。
↓デフォルト
Slide 1
Slide 2
Slide 3
Slide 4
↓影消し（slideShadows）、端のスライドの回転制御（limitRotation）
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
effect: 'flip',
flipEffect: {
slideShadows: false,
limitRotation: false
},
speed: 2000,
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
}
});
クリップボードにコピーする
'cards'
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
effect: 'cards',
speed: 2000,
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. 基本の要素と同じ
これも影を消したり角度を変更したりできます。
↓デフォルト
Slide 1
Slide 2
Slide 3
Slide 4
↓影消し（slideShadows）、スライドの間隔変更（perSlideOffset）、スライドの角度変更（perSlideRotate）
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
effect: 'cards',
cardsEffect: {
slideShadows: false,
perSlideOffset: 3,
perSlideRotate: 4
},
speed: 2000,
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
}
});
クリップボードにコピーする
値を増やしすぎると画面からはみだしますので注意。
'creative'
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
effect: 'creative',
creativeEffect: {
prev: {
translate: [0, '-100%', 0]
},
next: {
translate: [0, '-100%', 0]
}
},
speed: 2000,
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. 基本の要素と同じ
creativeEffect: { ～ } で具体的に動きを指定しないとアニメーションになりません。
上の例では、上にスライドが消えていって次のスライドが上から降りてきます。
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
effect: 'creative',
creativeEffect: {
prev: {
scale: 0
},
next: {
scale: 0
}
},
speed: 2000,
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
}
});
クリップボードにコピーする
縮小して消え、拡大して現れるパターン。
prev: は「どういう状態に変化していって消えるか」、next: は「どの状態から表示されるようになるか」の設定という感じ。
prev:にはscale:0（になれ）と書きますが、next:はscale: 1（になれ）と書くのではなく、scale:0（からスタートしろ）と指定します。
Slide 1
Slide 2
Slide 3
Slide 4
JavaScript
const mySwiper = new Swiper('.swiper', {
effect: 'creative',
creativeEffect: {
prev: {
scale: 0,
translate: ['-100%', '100%', 0]
},
next: {
opacity: 0,
translate: ['100%', '100%', 0]
}
},
speed: 2000,
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
}
});
クリップボードにコピーする
複数条件同時指定も可能です。
指定できるのは、translate、rotate、opacity、scale、shadow、origin（Transform origin）。
ちなみに、最後のスライドから最初のスライドに戻る時に逆の動きになるのは仕様です。
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
const mySwiper = new Swiper('.swiper', {
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
const mySwiper = new Swiper('.swiper', {
slidesPerView: 3,
grid: {
rows: 2,
fill: 'column'
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
クリップボードにコピーする
パラメータ解説
grid パラメータ取り得る値
（省略時は赤字）備考 rows1等の数値1列あたりのスライド数（行数） fill'column'スライドの並び順が「列」（縦方向）優先
'row'スライドの並び順が「行」（横方向）優先
fill: 'column'の場合は、上のサンプルのように
こういった並び順になります。
次のスライドは1列ずつ表示されますが、slidesPerGroupを指定すると複数列分一気に移動できます。
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
const mySwiper = new Swiper('.swiper', {
slidesPerView: 3,
slidesPerGroup: 6,
grid: {
rows: 2,
fill: 'column'
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
クリップボードにコピーする
fill: '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
こんな並び順。
コレジャナイ感ありませんか？
こう
の方がしっくりくるような気がするんですけどね。
この並び方も一手間加えれば実現可能です。
詳細は別ページで。
【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...
https://garigaricode.com/swiper_multirow
このページでは、Swiperを複数行で表示するカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 ココナラで設置代行始めました！以下を読むのがめんどくさい人、どうしてもうまくいかない人は、こちらもご検討ください。
1. 列（縦方向）優先1. 列（縦方向）優先fill: 'column'を指定した時、またはfillを省略した時は、こういう並び順になります。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...
ガリガリコード
21. 画面幅によってレイアウトを変える
画面幅によって、異なるレイアウトにしてしまうことも可能です。
これはGIFアニメでご覧下さい。
JavaScript
const mySwiper = new Swiper('.swiper', {
slidesPerView:1,
slidesPerGroup:1,
spaceBetween:0,
breakpoints: {
480: {
slidesPerView:3,
slidesPerGroup:3,
spaceBetween:5
},
500: {
slidesPerView:4,
slidesPerGroup:4,
spaceBetween:20
}
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
クリップボードにコピーする
パラメータ解説
パラメータ取り得る値
（省略時は赤字）備考 breakpoints数値画面サイズを指定し、{ }内に画面サイズごとに変更したいパラメータを記載する
上記のサンプルでは、
画面幅 ～479480～499500～ 一度に表示するスライド数1枚3枚4枚 一度に移動するスライド数1枚ずつ3枚ずつ4枚ずつ
スライド間の余白0px5px20px
…という風になります。
さて、このbreakpointsですがいくつか注意点があります。
まず、breakpointsはスクロールバーを含む画面サイズです。
Swiperのサイズでないことに注意。
また、breakpointsの中ですべてのパラメータを変えられるわけではないことにも注意。
サンプルのようにslidesPerView、slidesPerGroup、spaceBetweenなどは設定できますが、loop、direction、effectなどはbreakpointで変更することはできません。
…が、breakpointで変更できないパラメータをどうにかして条件次第で変更したいという場合、Swiperを再作成するという方法があります。
別ページで触れていますので、ご参考までに。
【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...
https://garigaricode.com/swiper_multirow#go-to-5-e3818ae381bee38191efbc9aswipere381aee5868de4bd9ce68890e381abe381a4e38184e381a6
このページでは、Swiperを複数行で表示するカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 ココナラで設置代行始めました！以下を読むのがめんどくさい人、どうしてもうまくいかない人は、こちらもご検討ください。
1. 列（縦方向）優先1. 列（縦方向）優先fill: 'column'を指定した時、またはfillを省略した時は、こういう並び順になります。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...
ガリガリコード
2 Pockets
22. 1ページに複数のSWIPERを設置する
ここまでのサンプルコードは1ページに1つだけSwiperを設置する場合を想定したものでしたが、このページのように複数設置したい場合は下記のようにします。
HTML
<!-- 1個目のSwiper START -->
<!-- Swiper START -->
<div class="swiper 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 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 swiper1"> こんな感じで基本の要素にクラスを追加して、そのクラスに対してSwiperを定義します。
JavaScript
//1個目のSwiper
const mySwiper1 = new Swiper('.swiper1', {
navigation: {
nextEl: '.next1',
prevEl: '.prev1'
},
pagination: {
el: '.page1',
type: 'bullets',
clickable: true
}
});
//2個目のSwiper
const 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
<!-- Swiper（メイン） START -->
<div class="swiper 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 -->
<!-- Swiper（サムネイル） START -->
<div thumbsSlider="" class="swiper 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 -->
クリップボードにコピーする
※CSSは3. 基本の要素に下記を追加
CSS
/* Swiper（サムネイル）全体のスタイル */
.swiper2 {
height: 80px;
margin-top: 10px;
}
/* Swiper（サムネイル）スライドのスタイル */
.swiper2 .swiper-slide {
width: 33.3%;
height: 80px;
line-height: 80px;
filter: brightness(0.5);
}
/* Swiper（サムネイル）現在のスライドのスタイル */
.swiper2 .swiper-slide-thumb-active {
filter: brightness(1);
}
クリップボードにコピーする
JavaScript
const mySwiper2 = new Swiper(".swiper2", {
watchSlidesProgress: true,
spaceBetween: 10,
slidesPerView: 3,
freeMode: true
});
const mySwiper1 = new Swiper(".swiper1", {
thumbs: {
swiper: mySwiper2
},
spaceBetween: 10,
navigation: {
nextEl: ".next1",
prevEl: ".prev1"
}
});
クリップボードにコピーする
パラメータ解説
パラメータ取り得る値
（省略時は赤字）備考 watchSlidesProgresstrueスライドの進行状況と可視性を計算する falseスライドの進行状況と可視性を計算しない
thumbsサムネイル用のSwiperを指定する
HTMLは上にあるものから書いていくのでメイン→サムネイルの順に書いていきますが、JavaScriptはサムネイル→メインの順で定義していることに注意。
メインのSwiperからサムネイルのSwiperを呼ぶので、呼び出し時にサムネイルのSwiperが定義済みじゃないとエラーになるからです。
23. 動的にスライドを追加・削除する
Slide 1
Slide 2
Slide 3
Slide 4
最初に追加 最後に追加 最後に2個追加 2番目を削除 全スライドを削除
Swiper下のボタンをボタンを押しまくってみてください。
「2番目に追加/削除」はその時点での2番目にスライドを追加/削除します（「最初に追加」した分も考慮）。
※HTMLは10. 自動でスライドの高さに合わせるに下記を追加、CSSは3. 基本の要素と同じ（スライド追加／削除ボタン部分は省略）
HTML
<!--コントロールボタン START-->
<div>
<a class="beforeadd">最初に追加</a>
<a class="afteradd">最後に追加</a>
<a class="after2add">最後に2個追加</a>
<a class="secondremove">2番目を削除</a>
<a class="removeall">全スライドを削除</a>
</div>
<!--コントロールボタン END-->
クリップボードにコピーする
JavaScript
const mySwiper = new Swiper('.swiper', {
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>');
});
//最後に追加
document.querySelector('.afteradd').addEventListener('click', function (e) {
e.preventDefault();
mySwiper.appendSlide('<div class="swiper-slide">Slide ' + (++end) + '</div>');
});
//最後に2個追加
document.querySelector('.after2add').addEventListener('click', function (e) {
e.preventDefault();
mySwiper.appendSlide(['<div class="swiper-slide">Slide ' + (++end) + "</div>", '<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">
<!-- 背景画像部分 -->
<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
const mySwiper = new Swiper('.swiper', {
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. スライドをズームさせる
スライドをダブルクリックでズームさせます。
Slide 2
Slide 4
HTML
<!-- Swiper START -->
<div class="swiper">
<!-- メイン表示部分 -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="画像のurl">
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<div class="swiper-zoom-target">
Slide 2
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="画像のurl">
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<div class="swiper-zoom-target">
Slide 4
</div>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper END -->
クリップボードにコピーする
JavaScript
const mySwiper = new Swiper('.swiper', {
zoom: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
クリップボードにコピーする
HTMLにタグの追加が必要。
画像と画像以外で少し書き方が変わります。
26. タイマーを表示する
Slide 1
Slide 2
Slide 3
Slide 4
1秒
HTML
<!-- Swiper START -->
<div class="swiper">
<!-- メイン表示部分 -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
<div class="autoplay-progress">
<!--円を描く部分-->
<svg viewBox="0 0 48 48">
<circle cx="24" cy="24" r="20"></circle>
</svg>
<span><!--カウントダウン部分--></span>
</div>
</div>
<!-- Swiper END -->
クリップボードにコピーする
JavaScript
const progressCircle = document.querySelector(".autoplay-progress svg");
const progressContent = document.querySelector(".autoplay-progress span");
const mySwiper = new Swiper('.swiper', {
on: {
autoplayTimeLeft(s, time, progress) {
progressCircle.style.setProperty(0, 1 - progress);
progressContent.textContent = `${Math.ceil(time / 1000)}秒`;
}
},
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
}
});
クリップボードにコピーする
※CSSは3. 基本の要素に下記を追加
CSS
/* 秒数カウントダウン */
.autoplay-progress {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 10;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
}
/* 円 */
.autoplay-progress svg {
--progress: 0;
position: absolute;
left: 0;
top: 0px;
z-index: 10;
width: 100%;
height: 100%;
fill: none;
stroke-width: 4px;
stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
stroke-dasharray: 125.6;
stroke-linecap: round;
transform: rotate(-90deg);
stroke: #ffffff;
}
クリップボードにコピーする
on: でイベント割り当てを定義します。
autoplayTimeLeft は、autoplayが設定されている場合は自動で次のスライドまでの時間を計ってくれます（ミリ秒およびパーセンテージ）。
27. トラブルシューティング
うまくいかないときのトラブルシューティングをいくつか。
○○はできる？
下記関連ページもご参考に。
【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...
https://garigaricode.com/swiper_navigation
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 ココナラで設置代行始めました！以下を読むのがめんどくさい人、どうしてもうまくいかない人は、こちらもご検討ください。
1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2
Slide 3 Slide 4 const mySwiper11 = new Swiper('.sample11', { navigation:...
ガリガリコード
1 Post
48 Pockets
【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...
https://garigaricode.com/swiper_multirow
このページでは、Swiperを複数行で表示するカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 ココナラで設置代行始めました！以下を読むのがめんどくさい人、どうしてもうまくいかない人は、こちらもご検討ください。
1. 列（縦方向）優先1. 列（縦方向）優先fill: 'column'を指定した時、またはfillを省略した時は、こういう並び順になります。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...
ガリガリコード
それでもダメなら、公式ドキュメント（英語）を参考にするとできるかもしれません。
動かない、表示されない
以下の点を確認。
* 括弧の開始・終了が対応しているか
* パラメータとパラメータの間が「,」で区切られているか
* 「'」（引用符）が必要なパラメータの場合、引用符が抜けていないか
* 1ページに複数のSwiperを設置していて、クラス名を追加し忘れていないか
もしくは、同じクラス名のSwiperが同じページに複数存在しないか
→参照：22. 1ページに複数のSwiperを設置する
スライドの中に別ページへのリンクを配置している時、リンクの反応が悪い（押しにくい、押しても遷移しない）
Google Chromeで発生することがあります。
そういう場合は下記のパラメータを追加。
JavaScript
const mySwiper = new Swiper('.swiper', {
preventClicks: false,
preventClicksPropagation: false
});
クリップボードにコピーする
上記パラメータは、意図しないクリックでの誤操作を防ぐためのもの。
省略時はtrueに設定されていますが、Chromeでは効き過ぎることがあるようなので、これをfalseにしてあげると反応しやすくなります。
どうしてもうまくいきません
ココナラで設置代行始めました。ご検討ください。
サイト、ブログへのスライドショーの設置代行承ります Swiper...
https://coconala.com/services/3105388
ご自身のホームページやブログに、見栄えするスライドショーを設置いたします。HTML/Wordpress/PHP等様々な形式に対応。動作イメージは動画をご確認くだ...
ココナラ
（外部サイト）
「個別に教えてください！」には対応できかねます。すみません。
関連記事
【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...
https://garigaricode.com/swiper_navigation
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 ココナラで設置代行始めました！以下を読むのがめんどくさい人、どうしてもうまくいかない人は、こちらもご検討ください。
1. 前・次ページボタンのカスタマイズ1. 前・次ページボタンのカスタマイズ基本レイアウトはこう。Sample.1-1 Slide 1 Slide 2
Slide 3 Slide 4 const mySwiper11 = new Swiper('.sample11', { navigation:...
ガリガリコード
1 Post
48 Pockets
【ver.11対応】サンプル付き！簡単にスライドを作れるライブ...
https://garigaricode.com/swiper_multirow
このページでは、Swiperを複数行で表示するカスタマイズ方法について解説します。Swiperとはなんぞやという方はこちらをご参照ください。 ココナラで設置代行始めました！以下を読むのがめんどくさい人、どうしてもうまくいかない人は、こちらもご検討ください。
1. 列（縦方向）優先1. 列（縦方向）優先fill: 'column'を指定した時、またはfillを省略した時は、こういう並び順になります。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...
ガリガリコード
Tags
Swiper スライドショー
あまみつ Follow on X 2018年8月1日Last Updated: 2023年12月23日
5,356 読み終わるまで約 1 時間
Share
Facebook Twitter はてなブックマーク LINE Pocket Share via Email Print
Share
Facebook Twitter はてなブックマーク LINE Pocket Share via Email Print
あまみつ
おなごだよ
SE・プログラマーやってたよ
今は事務員のはずだけど開発もさせられるよ
* X
* YouTube
* Instagram
IMAP形式で送信メールを共有する方法
【VER.11対応】サンプル付き！簡単にスライドを作れるライブラリSWIPER.JS超解説（各種ナビゲーションカスタマイズ編）
RELATED ARTICLES
【VER.11対応】サンプル付き！簡単にスライドを作れるライブラリSWIPER.JS超解説（複数行カスタマイズ編・おまけで再作成について）
2018年8月1日
【VER.11対応】サンプル付き！簡単にスライドを作れるライブラリSWIPER.JS超解説（各種ナビゲーションカスタマイズ編）
2018年8月1日
SWIPERの解説記事をVER.11対応にアップデートしました&設置代行はじめました。
2023年12月23日
About
元SE。
終電続きの日々に耐えかねて事務に転職。
が、事務員で入ったはずの事務所の開発を一手に担う系女子。
* X
* YouTube
* Instagram
* RSS
* mail
最近の投稿
* Java Script / JQuery
Swiperの解説記事をver.11対応にアップデートしました&設置代行はじめました。
2023年12月25日
* テレワークへの道 in 小規模事業所～社外・社内連絡編
2023年12月10日
* テレワークへの道 in 小規模事業所～電子印鑑作成編
2023年12月10日
* テレワークへの道 in 小規模事業所～準備編
2023年12月10日
* メールが弾かれた！メールサーバーがブラックリスト入りしているか確認する方法と解除してもらう方法
2023年12月10日
人気の投稿
* IMAP形式で送信メールを共有する方法
2023年12月10日
* 【ver.11対応】サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（各種ナビゲーションカスタマイズ編）
2023年12月23日
* テレワークへの道 in 小規模事業所～社外・社内連絡編
2023年12月10日
* POP形式とIMAP形式。あなたに合うメールはどっち？
2023年12月10日
* 【ver.11対応】サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（複数行カスタマイズ編・おまけで再作成について）
2023年12月23日
カテゴリー
* Web制作 16
* Webサービス 7
* Java Script / JQuery 4
* Wordpress / PHP 5
* IT 3
よく読まれている記事
* 2023年12月10日
IMAP形式で送信メールを共有する方法
* 2023年12月23日
【VER.11対応】サンプル付き！簡単にスライドを作れるライブラリSWIPER.JS超解説（各種ナビゲーションカスタマイズ編）
* 2023年12月10日
テレワークへの道 IN 小規模事業所～社外・社内連絡編
* 2023年12月10日
POP形式とIMAP形式。あなたに合うメールはどっち？
* 2023年12月23日
【VER.11対応】サンプル付き！簡単にスライドを作れるライブラリSWIPER.JS超解説（複数行カスタマイズ編・おまけで再作成について）
最近更新された記事
タグ一覧
ConoHa KUSANAGI Swiper Wordpress サーバー スライドショー テレワーク メール 効率化 画像
© Copyright 2018-2024 ガリガリコード, All Rights Reserved プライバシーポリシー
* Home
* Web制作
* X
* YouTube
* Instagram
* RSS
* mail
Facebook Twitter はてなブックマーク Pocket
Back to top button
Close
* X
* YouTube
* Instagram
* RSS
* mail
検索:
Close
検索
コメントを読み込み中…
コメントをどうぞ
メール 名前 サイト