
- 1. Swiperとは
- 2. 使うための準備
- 3. 基本の要素
- 4. 縦方向のスライドにする
- 5. 前・次ボタンをつける
- 6. スライドの移動速度を変える
- 7. 逆方向に進むスライドを作る
- 8. ページネーションをつける
- 9. スクロールバーを付ける
- 10. 自動でスライドの高さに合わせる
- 11. 最初に表示するスライドを指定する
- 12. ループさせる
- 13. 自動で動かす
- 14. 一度に複数のスライドを表示する
- 15. スライドの間隔を設定する
- 16. 一度に動かすスライド数を設定する
- 17. 現在のスライドを中央に表示する
- 18. スライドが切り替わるときのアニメーションを指定する
- 19. 一度で好きな位置までスワイプ・スクロールできるようにする
- 20. 複数行のスライドにする
- 20. 画面幅によってレイアウトを変える
- 22. 1ページに複数のSwiperを設置する
- 23. 動的にスライドを追加・削除する
- 24. Parallax効果をつける
- 25. トラブルシューティング
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', {
});
どんなレイアウトにするにしても、絶対省略できないのがこの部分。これを実際動かすとこうなります。
左右にスワイプ(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の場合はマウスのホイールスクロールとキーボードの矢印キーでも動かせるようにしてみました。
JavaScript
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
mousewheel: {
forceToAxis: false,
invert: false
},
keyboard: true
});
ハイライト部分が基本の要素に追加したコードです。※HTML、CSSは3. 基本の要素と同じ
パラメータ解説
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
---|---|---|
direction | 'horizontal' | 横方向に移動するスライドを作る |
'vertical' | 縦方向に移動するスライドを作る | |
keyboard | true | キーボードで操作できるようにする |
false | キーボードでの操作不可 |
mousewheel | ||
---|---|---|
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
forceToAxis | true | スライドの移動方向とホイールの動かす方向が合っている場合のみ動かす |
false | スライドの移動方向とホイールの動かす方向を考慮しない(例:横スライドでも上下のホイールスクロールで移動可能) | |
invert | true | ホイールのスクロール方向とスライドの移動方向を反転させる(例:上方向にホイールスクロールするとスライドが下に移動する) |
false | ホイールのスクロール方向にスライドが移動する。 |
5. 前・次ボタンをつける
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 | 前ページボタンのセレクタ名を指定 |
やり方は別ページで解説しています。
6. スライドの移動速度を変える
すぐ上のサンプルと、前・次ボタンを押したときのスライドが切り替わる速度を比べてみてください。
JavaScript
var mySwiper = new Swiper('.swiper-container', {
speed: 3000,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
});
※HTMLは5. 前・次ボタンをつける、CSSは3. 基本の要素と同じパラメータ解説
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
---|---|---|
speed | 300等の数値 | スライドの切り替わる速度を数値で指定(単位:ms) |
7. 逆方向に進むスライドを作る
通常のスライダーは左から右に向かって1、2、3…と進みますが、逆に右から左に向かって進むスライドを作る場合。
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. ページネーションをつける
ページネーションがあると、何スライド中今何スライド目を見ているのかがわかりやすくなります。
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' | カスタム形式 | |
clickable | true | type: 'bullets'の時のみ有効。○ ● ● ● … の●クリックで直接そのスライドに移動できる |
false | ●クリックで移動しない |
'fraction'
JavaScript
var mySwiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'fraction'
}
});
'progressbar'
JavaScript
var mySwiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'progressbar'
}
});
'custom'は合わせて書式も設定する必要があります。
ページネーション全般のカスタマイズ方法と併せて、詳細は別ページで。
9. スクロールバーを付ける
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 | スクロールバーのセレクタ名を指定 | |
hide | true | 操作時以外はスクロールバーを隠す |
false | 常にスクロールバーが表示される | |
draggable | true | スクロールバーを直接操作してスライドを移動できるようにする |
false | スクロールバーの直接操作不可(スワイプ等でスライダーを動かした時に連動して動くのみ) |
10. 自動でスライドの高さに合わせる
各スライドの高さがバラバラの場合でも、自動で前・次ページボタンやページネーションの位置を合わせることができます。
下記の例では、各スライドの高さをスタイルシートで変更しています。
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
}
});
パラメータ解説
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
---|---|---|
autoHeight | true | スライドの高さに合わせてSwiperの高さを変える |
false | スライドの高さに合わせてSwiperの高さを変更しない |
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. 最初に表示するスライドを指定する
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. 基本の要素と同じパラメータ解説
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
---|---|---|
initialSlide | 0等の数値 | 初期表示されるスライドのインデックスを指定。0から始まる。 |
12. ループさせる
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. 基本の要素と同じパラメータ解説
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
---|---|---|
loop | true | ループする |
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. 自動で動かす
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 | ||
---|---|---|
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
delay | 3000等の数値 | スライドが動く間隔。単位はms(3000ms=3秒) |
stopOnLastSlide | true | 最後のスライドまで行ったら停止する。loop: trueの時はここの設定にかかわらず動き続ける |
false | 最後のスライドまで行くと最初のスライドに戻って再生し続ける | |
disableOnInteraction | true | ユーザーがスライダーを操作したら、自動再生を停止する |
false | ユーザーがスライダーを操作した後も自動再生し続ける | |
reverseDirection | true | 最後のスライドから最初のスライドに向かって再生する |
false | 最初のスライドから順に再生する |
14. 一度に複数のスライドを表示する
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. 基本の要素と同じパラメータ解説
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
---|---|---|
slidesPerView | 1等の数値、または'auto' | 一度に表示するスライド数を指定。'auto'の時はスライドの大きさ次第。 |
loopedSlides | 数値 | (loopパラメータの説明も参照) slidesPerView: 'auto'かつ loop: trueの場合は必須。最初のスライドの前、最後のスライドの後に複製される非表示のスライド数を設定する。総スライド数の半分以上の値を指定しておけばOK。 |
15. スライドの間隔を設定する
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. 基本の要素と同じパラメータ解説
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
---|---|---|
spaceBetween | 0等の数値 | スライドの間隔を指定(単位:px) |
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
---|---|---|
slidesOffsetBefore | 0等の数値 | 最初のスライドの前に追加される空白(単位:px) |
slidesOffsetAfter | 0等の数値 | 最後のスライドの後に追加される空白(単位:px) |
スライド表示領域の両端に付くものではありません。
サンプルはこうなります。
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
}
});
スライド表示領域の両端に空白を取りたい場合(スライドの外側に前・次ボタンを配置したい場合など)は別ページで解説しています。16. 一度に動かすスライド数を設定する
3枚同時に動かします。
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. 基本の要素と同じパラメータ解説
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
---|---|---|
slidesPerGroup | 1等の数値 | 一度に動かすスライドの枚数 |
17. 現在のスライドを中央に表示する
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. 基本の要素と同じパラメータ解説
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
---|---|---|
slidesPerView | true | 現在のスライドを中央に表示する |
false | 現在のスライドを左端または上端に表示する |
18. スライドが切り替わるときのアニメーションを指定する
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' | 平面が回転するようなアニメーション |
他を指定したときも見てみましょう。
'cube'
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'
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'
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. 一度で好きな位置までスワイプ・スクロールできるようにする
スワイプした時に普通はスライド単位で移動しますが、好きなだけ動かせて好きな位置で止められるようになります。
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. 基本の要素と同じパラメータ解説
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
---|---|---|
freeMode | true | スライド位置を固定させない |
false | スライド位置を固定させる |
20. 複数行のスライドにする
※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
}
});
パラメータ解説
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
---|---|---|
slidesPerColumn | 1等の数値 | 1列あたりのスライド数(行数) |
slidesPerColumnFill | 'column' | (slidesPerColumnが2以上の場合のみ有効)スライド並び順が「列」(縦方向)優先 |
'row' | (slidesPerColumnが2以上の場合のみ有効)「行」(横方向)優先 |
slidesPerColumnFill: 'column'の場合は、上のサンプルのように

こういった並び順になります。
slidesPerColumnFill: 'row'の場合は、次のようになります。

こんな並び順。
コレジャナイ感ありませんか?
こう

の方がしっくりくるような気がするんですけどね。
この並び方も一手間加えれば実現可能です。
詳細は別ページで。
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 | 数値 | 画面サイズを指定し、{ }内に画面サイズごとに変更したいパラメータを記載する |
画面幅 | |||
---|---|---|---|
~300 | 301~350 | 351~ | |
一度に表示するスライド数 | 1枚 | 3枚 | 4枚 |
一度に移動するスライド数 | 1枚ずつ | 3枚ずつ | 4枚ずつ |
スライド間の余白 | 0px | 0px | 10px |
さて、このbreakpointsですがいくつか注意点があります。
まず、breakpointsはスクロールバーを含む画面サイズです。
Swiperのサイズでないことに注意。
また、breakpointsの中ですべてのパラメータを変えられるわけではないことにも注意。
サンプルのようにslidesPerView、slidesPerGroup、spaceBetweenなどは設定できますが、slidesPerColumn、loop、direction、effectなどはbreakpointで変更することはできません。
…が、breakpointで変更できないパラメータをどうにかして条件次第で変更したいという場合、Swiperを再作成するという方法があります。
別ページで触れていますので、ご参考までに。
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. 基本の要素と同じこれを応用すると、こんなスライダーも作れます。
大きい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;
パラメータ解説
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
---|---|---|
slideToClickedSlide | true | スライドクリックでそのスライドに移動する |
false | スライドクリックで移動しない(前・次ボタン、ページネーション、スワイプでのみ移動) |
controller | ||
---|---|---|
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
control | 連動させるSwiperの定義名を指定 | |
inverse | true | 連動させる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. 動的にスライドを追加・削除する
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() | 全てのスライドを削除する。引数不要。 |
24. Parallax効果をつける
Parallaxは、手前と奥の要素の移動速度を変えて、奥行きがあるように錯覚させる効果のこと。
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
}
});
パラメータ解説
パラメータ | 取り得る値 (省略時は赤字) | 備考 |
---|---|---|
parallax | true | parallaxをONにする |
false | parallaxを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. トラブルシューティング
うまくいかないときのトラブルシューティングをいくつか。
○○はできる?
下記関連ページもご参照ください。
それでもダメなら、公式ドキュメント(英語)を参考にするとできるかもしれません。
ここでは見た目ではわからないパラメータの解説は省略しました。
やろうと思えばタッチ・スワイプについてもっと細かな制御を追加したりすることも可能です。
動かない、表示されない
以下の点を確認してみてください。
- 括弧の開始・終了が対応しているか
- パラメータとパラメータの間が「,」で区切られているか
- 「'」(引用符)が必要なパラメータの場合、引用符が抜けていないか
- 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の親要素の幅指定を見直して見てください。
親の親が原因、ということもありますので親を見直してもうまくいかない場合は、さらにその親も確認を。
関連記事
導入部分。が抜けてません?
コメントありがとうございます。
気づくのが遅くなり申し訳ありません。
導入部分の。…すみません、どこのことでしょうか…
「.jsは内の方が多少ページの描画が速くなります。(Swiper設置箇所より前に読み込む)」と記載ありますが、
最新版で試してみたところ、Swiper設置箇所より後に読み込まないと動作しませんでした。
コメントありがとうございます。
ちょっと今こちらで検証する時間がないのですが、教えていただいた内容を記事中に反映しておきます。
ありがとうございました。
とても分かりやすく、面白い記事でした😀
そして、なかなか実装出来なかったスライドショーを
実装できました!!!!!!!!!
ありがとうございます!!!!!!!
20番目の項目が私に大きく役立ちました。 ありがとうございます。
すごくわかりやすかったです!助かりました!ありがとうございます!!!!