Webサイトに使われることが多い「スライダー機能」ですが、主にjQueryを使用したスライダーが多く使われてきました。
この記事では、jQuery不要のスライダー「Swiper」の使い方とオプションによるカスタマイズ方法をご紹介していきます。
Swiperの使い方
※追記：最新版であるバージョン8の使い方を追記しました。
HTML(CDN：バージョン8)
バージョン8では、CDNの読み込み先が変わっています。また、ダウンロードはこちらから可能です。（※ダウンロードするバージョンは適宜変更してください。）
これから使用する場合は、最新版を使用することをおすすめします。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>HTML(CDN：バージョン7)
バージョン7では、CDNの読み込み先が変わっています。また、ダウンロードはこちらから可能です。（※ダウンロードするバージョンは適宜変更してください。）
これから使用する場合は、最新版を使用することをおすすめします。
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>HTML(CDN：バージョン6)
バージョン6では、バージョン5にアップデート時と同様に、CDNの読み込み先が変わっています。また、ダウンロードはこちらから可能です。（※ダウンロードするバージョンは適宜変更してください。）
これから使用する場合は、最新版を使用することをおすすめします。
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>レイアウトを追加する
続いて、基本となるレイアウトを<body>~</body>に追加していきます。
※以下は、バージョン8の設定方法です。（※バージョン7から変更なし）
HTML
<!-- Slider全体のコンテナ -->
<div class="swiper">
<!-- Sliderの内包コンテナ -->
<div class="swiper-wrapper">
<!-- Slideさせたいコンテンツ -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- ページネーション（※省略可） -->
<div class="swiper-pagination"></div>
<!-- ナビゲーションボタン（※省略可） -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- スクロールバー（※省略可） -->
<div class="swiper-scrollbar"></div>
</div>スライド全体を「swiper」クラスで囲み、スライドさせたいコンテンツを「swiper-slide」クラスで囲みます。
さらに、それらのコンテンツの親要素として「swiper-wrapper」クラスで囲みます。
そして、「swiper-pagination」クラスで「ページネーション」を、「swiper-button-(prev or next)」でナビゲーションボタンを、「swiper-scrollbar」クラスでスクロールバーが表示されます。
サイズを設定する
CSSでサイズを設定していきます。
「.swiper」クラスに設定しますが、スライドの内容によっては、「height」を設定しないと表示がされない場合があるので注意が必要です。
CSS
.swiper{
width: 600px;
height: 300px;
}初期化する
最後に初期化をします。
下記のJSを</body>の直前に読み込みます。
HTML（パラメータなし）
<script>
const mySwiper = new Swiper ('.swiper', {
})
</script>これでもスライドはしますが、ナビゲーションやスクロールバーが機能しないので、パラメータを設定して動くようにします。
HTML（パラメータあり）
<script>
const mySwiper = new Swiper ('.swiper', {
// ここからオプション
loop: true,
direction: 'vertical',
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>これで、基本的なスライダーが動作するようになります。
ちなみに、この時点で動作しないという方は、「記述ミス」もしくは「Swiperのバージョン」をご確認ください。
次に、主なパラメータを使ったカスタマイズを見ていきましょう。
パラメータを使用したカスタマイズ
Swiperには多くのパラメータが用意されています。
したがって、すべてのパラメータをここでご紹介するのは難しいので、使用頻度が高いパラメータに絞ってご紹介したいと思います。
すべてのパラメータを確認したい場合は下記リンクからご確認ください。
主なパラメータ一覧
| パラメータ | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| direction | string | horizontal | スライド方向を「horizontal（横）」 または「vertical（縦）」にします。 |
| speed | number | 300 | スライドとスライドの 遷移時間（ミリ秒）を設定します。 |
| effect | string | ‘slide’ | スライドのエフェクトを設定します。 ‘slide’,’fade’,’cube”coverflow’（Apple製品の3DGUIのようなアニメーション）, ‘flip’（回転しながらスライド）,’creative’,’cards’が選択できます。 |
| spaceBetween | number | 0 | スライドとスライドの余白（px指定）を設定します。 |
| slidesPerView | number もしくは ‘auto’ | 1 | 一度に表示するスライドの数。※「auto」の場合、 loopするには、loopedSlidesを設定する必要がある。 |
| loop | boolean | false | スライドをループさせます。 初期値はfalse。 |
| breakpoints | object | なし | 画面サイズごとに異なるパラメータを設定できます。 但し、slidesPerView、slidesPerGroup、spaceBetweenのような異なるレイアウトと ロジックを必要としないパラメータだけを変更できます。 |
コンポーネント
コンポーネントを利用するとナビゲーションやページネーションを設定することができます。
コンポーネントとは、「部品」といった意味で、Swiper側で予め便利な機能を利用できるように用意されています。
主なコンポーネントを見ていきましょう。
Navigation（ナビゲーション）
スライドにナビゲーション（前後のスライドへのボタン）を表示します。
使用例
const mySwiper = new Swiper('.swiper', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});パラメーター
| パラメータ | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| nextEl | string | null | 「次へ」ボタンのように動作する要素のCSSセレクタ またはHTML要素を含む文字列 |
| prevEl | string | null | 「次へ」ボタンのように動作する要素のCSSセレクタ またはHTML要素を含む文字列 |
| hideOnClick | boolean | false | スライダーのコンテナをクリックした後に ナビゲーションボタンの表示/非表示を切り替える。 |
| disabledClass | string | ‘swiper-button-disabled’ | 前or後のスライドがないときにナビゲーションボタンに 追加されるCSSクラス名 |
| hiddenClass | string | ‘swiper-button-hidden’ | 非表示になったときにナビゲーションボタンに 追加されるCSSクラス名 |
Pagination
スライドにページネーション（何枚目のスライドかを示す）を表示します。
使用例
const mySwiper = new Swiper('.swiper', {
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
});Scrollbar
スライドにスワイプやドラッグの際に、スクロールバーを表示します。
使用例
const mySwiper = new Swiper('.swiper', {
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
},
});Autoplay
自動でスライドを再生します。「delay」パラメータでスライド間の遷移の遅延を設定します。
「delay」パラメータを記述しないと自動再生は無効になるので注意が必要です。
ちなみに、「1000=1秒」となります。
使用例
const mySwiper = new Swiper('.swiper', {
autoplay: {
delay: 5000,
},
});※スライド個別に「delay」を設定したい場合
スライドごとに「delay」の値を変えることができます。
以下の様に、「data-swiper-autoplay=”2000″」と属性を設定することで可能です。
<div class="swiper-slide" data-swiper-autoplay="2000">応用編
「Swiper」にはここでは紹介していない機能がもっと多く存在します。
これらの機能を活用することで、様々な動きや機能を実装することが可能となります。
実際に、下記のような機能を実装してみましたので参考にしてみてください。
