

そんな疑問にお答えします。
前回はSwiperの導入方法と基本となる動きを確認しました。
【2022年版】スライダープラグイン「Swiper」の使い方【基礎編】
See the Pen
スライダー2 by toshi (@toshi78)
on CodePen.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DEMO</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
</head>
<body>
<!-- Swiper START -->
<!-- スライダー全体をくくるメインコンテナ(必須) -->
<div class="swiper">
<!-- 全スライドをまとめるラッパー(必須) -->
<div class="swiper-wrapper">
<!-- 各スライド(必須) -->
<div class="swiper-slide">Slide A</div>
<div class="swiper-slide">Slide B</div>
<div class="swiper-slide">Slide C</div>
<div class="swiper-slide">Slide D</div>
</div>
<!-- 前・次ボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script>
var mySwiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
今回はいろんなオプション設定を見ていきます。
目次
Swiperのオプション設定
ページネーションをつける
ページネーションがあると今どのページを見ているのかがわかりやすくなります。
<!-- Swiper START -->
<!-- スライダー全体をくくるメインコンテナ(必須) -->
<div class="swiper">
<!-- 全スライドをまとめるラッパー(必須) -->
<div class="swiper-wrapper">
<!-- 各スライド(必須) -->
<div class="swiper-slide">Slide A</div>
<div class="swiper-slide">Slide B</div>
<div class="swiper-slide">Slide C</div>
<div class="swiper-slide">Slide D</div>
</div>
<!-- 前・次ボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- ページネーション -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper END -->
var mySwiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
//ページネーション
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
See the Pen
スライダー3 by toshi (@toshi78)
on CodePen.
パラメータ | タイプ | 説明 |
---|---|---|
el | ページネーションのセレクタ名を指定 | |
type | ‘bullets’ | ○ ● ● ● … 形式 |
‘fraction’ | 何分の何形式 | |
‘progressbar’ | プログレスバー形式 | |
‘custom’ | カスタム形式 | |
clickable | true | type: ‘bullets’の時のみ有効。○ ● ● ● … の●クリックで直接そのスライドに移動できる |
false | ●クリックで移動しない |
上のサンプルはtype: ‘bullets’ですが、他の設定は下のようになります。
type: ‘fraction’
See the Pen
スライダー5 by toshi (@toshi78)
on CodePen.
type: ‘progressbar’
See the Pen
スライダー6 by toshi (@toshi78)
on CodePen.
type: ‘custom’
bulletsでもfractionでもprogressbarでもなく違った形式にする場合に使用します。
ループさせる
「loop: true」を追加すればOKです。
var mySwiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
//ループ
loop: true,
});
See the Pen
スライダー4 by toshi (@toshi78)
on CodePen.
パラメータ | タイプ | 説明 |
---|---|---|
loop | true | ループする |
false | ループしない |
スクロールバーをつける
<!-- Swiper START -->
<!-- スライダー全体をくくるメインコンテナ(必須) -->
<div class="swiper">
<!-- 全スライドをまとめるラッパー(必須) -->
<div class="swiper-wrapper">
<!-- 各スライド(必須) -->
<div class="swiper-slide">Slide A</div>
<div class="swiper-slide">Slide B</div>
<div class="swiper-slide">Slide C</div>
<div class="swiper-slide">Slide D</div>
</div>
<!-- 前・次ボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- スクロールバー -->
<div class="swiper-scrollbar"></div>
</div>
<!-- Swiper END -->
var mySwiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
//スクロールバー
scrollbar: {
el: '.swiper-scrollbar',
hide: false,
draggable: false
}
});
See the Pen
スライダー7 by toshi (@toshi78)
on CodePen.
パラメータ | タイプ | 説明 |
---|---|---|
el | スクロールバーのセレクタ名を指定 | |
hide | true | 操作時以外はスクロールバーを隠す |
false | 常にスクロールバーが表示される | |
draggable | true | スクロールバーを直接操作してスライドを移動できるようにする |
false | スクロールバーの直接操作不可 |
スライドする速度を変える
今までのサンプルよりスライドする速度を遅くしています。
var mySwiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
//スピード
speed: 4000
});
See the Pen
スライダー8 by toshi (@toshi78)
on CodePen.
パラメータ | タイプ | 説明 |
---|---|---|
speed | 数値 | スライドの切り替わる速度を数値で指定(単位:ms) |
自動でスライドさせる
var mySwiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
//ループ
loop: true,
// 自動スライド
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
reverseDirection: false
}
});
See the Pen
スライダー9 by toshi (@toshi78)
on CodePen.
パラメータ | タイプ | 説明 |
---|---|---|
delay | 数値 | スライドが動く間隔。単位はms。 |
stopOn LastSlide |
true | 最後のスライドまで行ったら停止する。loop: trueの時はここの設定にかかわらず動き続ける |
false | 最後のスライドまで行くと最初のスライドに戻って再生し続ける | |
disableOn Interaction |
true | ユーザーがスライダーを操作したら、自動再生を停止する |
false | ユーザーがスライダーを操作した後も自動再生し続ける | |
reverse Direction |
true | 最後のスライドから最初のスライドに向かって再生する |
false | 最初のスライドから順に再生する |
自動でスライドの高さに合わせる
各スライドの高さがバラバラの場合でも、高さに応じて自動で前・次ボタンやページネーションを調整します。
しかしスライダーのコンテンツの高さは違うので上下しながらスライドします。
var mySwiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
loop: true,
// 高さ調整
autoHeight: true
});
See the Pen
スライダー10 by toshi (@toshi78)
on CodePen.
パラメータ | タイプ | 説明 |
---|---|---|
autoHeight | true | スライドの高さに合わせてSwiperの高さを変える |
false | スライドの高さに合わせてSwiperの高さを変更しない |
一度に表示するスライド数を指定する
var mySwiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
loop: true,
// 一度に表示するスライド数を指定
slidesPerView: 2
});
See the Pen
スライダー11 by toshi (@toshi78)
on CodePen.
パラメータ | タイプ | 説明 |
---|---|---|
slidesPerView | 数値または’auto’ | 一度に表示するスライド数を指定。’auto’の時はスライドの大きさ次第。 |
数値 | slidesPerView: ‘auto’かつ loop: trueの場合は必須。総スライド数の半分以上の値を指定。 |
スライドの間隔を設定する
var mySwiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
loop: true,
slidesPerView: 3,
// スライドの間隔
spaceBetween: 10
});
See the Pen
スライダー11 by toshi (@toshi78)
on CodePen.
パラメータ | タイプ | 説明 |
---|---|---|
spaceBetween | 数値 | スライドの間隔を指定(単位:px) |
レスポンシブ設定の方法
最後にレスポンシブ設定の記述方法を見ておきましょう。
先にコードを示すと以下のとおりとなります。
var mySwiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
loop: true,
//デフォルト(画面幅が最も狭い)のスライドの数などを設定
//表示させるスライドの数を1に設定
slidesPerView: 1,
breakpoints: {
768: {
//表示させるスライドの数を2に設定
slidesPerView: 2,
//スライド間の間隔を20pxに設定
spaceBetween: 20
},
980: {
//表示させるスライドの数を3に設定
slidesPerView: 3,
//スライド間の間隔を30pxに設定
spaceBetween: 30
},
}
});
- デフォルト設定として画面幅が最も狭い場合の設定(スライド枚数等)を書く
- 任意のブレイクポイントを指定
- ブレイクポイントよりも画面幅が大きくなった場合の設定を書く
まとめ:Swiperを使ってみよう!
Swiperはオプションが山ほどありますので、ひとつひとつ追っていくときりがありません。
使う必要があるときに調べて実装する、を繰り返しながら覚えていきましょう。
オプション一覧が載っているサイトはこちらです。
いろいろ試して少しずつ慣れていきましょう。
投稿者 トシ
コメントを残す