サイトではほとんど必ずと言っていいほどスライダーが使われていますよね。
スライダーはいちから作ることもできますが、便利なプラグインもたくさんあります。
今回はプラグインのひとつである「Swiper」の使い方を簡単にまとめたいと思います。
また別のプラグインである「slick」の導入方法については
こちらの記事でまとめていますのでよろしければご覧ください。
Swiperの導入方法
「Swipe」rのおおまかな導入手順はこんなかんじです。
- Swiperのデータ取得(CDNやファイルのダウンロードなど)
- Demosから使いたい種類を選ぶ
- Swiperをinitializeする
- サイズや機能(左右の矢印やページネーション)を調整する
Swiperの公式ページ：https://swiperjs.com
ではもう少し詳しく見ていきましょう。
手順1：Swiperのデータ取得
Get Started(https://swiperjs.com/get-started/)に移動すると、
全体の導入手順をみることができます。
導入にあたり、CSSファイルとJSファイル、2つのファイルの読み込みが必要です。
CDNの読み込みもファイルのダウンロードも使えます。
手順2：Demosから使いたい種類を選ぶ
データを取得したら、使いたいスライダーの種類を選びます。
Demos(https://swiperjs.com/demos/)に一覧が載っています。
デモの種類のタイトルのすぐ下にあるSource codeボタンから、
ソースコードページに移動可能です。
手順3：Swiperをinitializeする
作業ファイルにSwiperのCSSファイルとJSファイルを読み込ませ、
JavaScriptでSwiperを発火させます。
Get startedの手順5、
もしくはDemosのソースコードのInitialize Swiper部分を参照します。
手順4：サイズや機能を追加する
スライダーのサイズや機能を好きなように調整していきます。
調整することが多い項目をまとめてみます。
1：サイズの調整
.swiper-containerのwidthとheightで調整します。
2：機能の追加
左右の矢印ボタンの追加
Demos(https://swiperjs.com/demos/)のNavigationの項目に、
左右の矢印ボタンがついたスライダーが載っています。
ちがうデモから選んだ場合でもHTMLに下記ボタン要素を追加して、
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>initialize時にnavigationの指示も追加すれば実装できます。
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}ページネーションの追加
Demos(https://swiperjs.com/demos/)の中に
Paginationのサンプルが複数載っています。
タイプを選んで、HTMLおよび initialize時のpaginationの設定を追加しましょう。
以上、Swiperの導入方法でした。
