【JavaScript】Swiperの導入方法と基本オプションについて解説
スライダーはどうやって実装するんだろうと思ったことはありませんか？JavaScriptのプラグインSwiperを使えばスライダーを簡単に作成できます。この記事ではSwiperの導入方法と基本オプションについてご紹介します。
スライドが切り替わるときのアニメーションや、見た目を変更する「effect」オプションがあるのですがこれについては次回の記事でご紹介します。この記事では以下のお悩みを解決します。
- ・Swiperの導入方法を知りたい
- ・Swiperの基本的なオプションを知りたい
1. Swiperについて
SwiperはJavaScriptのプラグインでスライダーを簡単に作成できます。SwiperはjQueryに依存せずに素のJavaScript（バニラJSとも呼ばれる）でも使用でき、軽量なのが特徴です。
また、レスポンシブデザインの対応やアニメーションなどのオプションも豊富で細かく設定を変更することができます。
2. Swiperの導入方法
Swiperを導入するには3つの方法があります。
- ① CDNを利用する
- ② ファイルをダウンロードする
- ③ npmでインストールする
この記事では①CDNを利用する方法と②ファイルをダウンロードする２つの方法をご紹介します。
まず以下のリンクから公式サイトにアクセスしてください。
アクセスしたら「2-1. CDNを利用する」または「2-2. ファイルをダウンロードする」のどちらかの手順で進めていってください。
2-1. CDNを利用する
①公式の「Getting Started with Swiper」のページにアクセスし、下にスクロールすると「Use Swiper from CDN」と書かれている箇所があるので下の赤枠の中のlinkタグ、scriptタグをそれぞれコピーします。
②コピーしたlinkタグは<head>タグ内に、scriptタグは<body>の閉じタグの前に貼りつけます。自分で作成したcssファイル、jsファイルはスタイルや設定を上書きできるようにその後に読み込むようにします。
※記事公開時点では以下のCDNのタグが最新版ですが、更新される場合もありますので最新版を使用したい方は公式サイトからコピーすることをおすすめします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swiper</title>
<!-- ➁コピーしたlinkタグを貼る -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<!-- 自分で作成したcssファイルを読み込む -->
<link rel="stylesheet" href="cssファイルのパス">
</head>
<body>
<!-- ➁コピーしたscriptタグを貼る -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- 自分で作成したjsファイルを読み込む -->
<script src="jsファイルのパス"></script>
</body>
</html>これでCDNの設定が完了しましたのでSwiperを使うことができます。
2-2. ファイルをダウンロードする
ファイルをダウンロードする場合も公式の「Getting Started with Swiper」のページにアクセスし、下にスクロールすると「Download assets」と書かれている場所があるのでそこの①リンクをクリックします。
リンクをクリックすると以下のページに遷移するので②Typeを「Default」を選択します。
選択すると「swiper-bundle.min.js」と「swiper-bundle.min.css」のリンクが表示されるので「swiper-bundle.min.js」のリンクをクリックします。
クリックすると以下のページに遷移するので③ファイルをダウンロードします。
「swiper-bundle.min.js」が保存できたら、④「swiper-bundle.min.css」のリンクもクリックして同様にファイルをダウンロードします。
⑤index.htmlと同じ階層に「swiper」という名前のディレクトリを作成し、そのなかに「swiper-bundle.min.js」と「swiper-bundle.min.css」を保存します。
⑥最後にhtmlファイルで「swiper-bundle.min.css」を<head>タグ内、「swiper-bundle.min.js」を<body>の閉じタグの前で読み込みます。自分で作成したcssファイル、jsファイルはその後にそれぞれ読み込むます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swiper</title>
<!-- ➅swiper-bundle.min.cssを読み込む -->
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css"/>
<!-- 自分で作成したcssファイルを読み込む -->
<link rel="stylesheet" href="cssファイルのパス">
</head>
<body>
<!-- ➅swiper-bundle.min.jsを読み込む -->
<script src="./swiper/swiper-bundle.min.js"></script>
<!-- 自分で作成したjsファイルを読み込む -->
<script src="jsファイルのパス"></script>
</body>
</html>これで準備は完了ですのでSwiperを使うことができます。
3. 基本設定
Swiperの記述方法をご紹介します。まずHTMLは以下のように記述します。
<!-- swiper全体を囲む -->
<div class="swiper">
<!-- スライド要素全体を囲む-->
<div class="swiper-wrapper">
<!--スライド-->
<div class="swiper-slide"><img src="画像のパス"></div>
<div class="swiper-slide"><img src="画像のパス"></div>
<div class="swiper-slide"><img src="画像のパス"></div>
<div class="swiper-slide"><img src="画像のパス"></div>
<div class="swiper-slide"><img src="画像のパス"></div>
<div class="swiper-slide"><img src="画像のパス"></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>
</div>HTMLにはswiper全体を囲む「.swiper」、スライド要素全体を囲む「.swiper-wrapper」、スライドを示す「.swiper-slide」の3つの要素は必須になります。この3つがないとswiperは動作しません。
ページネーション「.swiper-pagination」、ナビゲーションボタン「.swiper-button-prev」「.swiper-button-next」、スクロールバー「.swiper-scrollbar」の３つはオプションになるので必要ない場合は削除してください。
次にJavaScriptです。JavaScriptはconst swiper = new Swiper(‘.swiper’, {~});内に設定します。ページネーション、ナビゲーションボタン、スクロールバーの設定は必要に応じて記述してください。
const swiper = new Swiper('.swiper', {
//スライドを無限にループさせる
loop: true,
//ページネーションの設定
pagination: {
el: '.swiper-pagination',
},
//ナビゲーションボタンの設定
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//スクロールバーの設定
scrollbar: {
el: '.swiper-scrollbar',
},
});最後にCSSです。「.swiper」のwidthとheightの値は適宜変更してください。
.swiper {
width: 300px;
height: 200px;
}
.swiper-slide {
width: 100%;
height: 100%
}
.swiper-slide img {
width: 100%;
height: 100%;
//画像のアスペクト比（縦横比）を保ちながら表示される
object-fit: cover;
}実行結果は以下のとおりです。ページネーション、ナビゲーションボタン、スクロールバーが表示されていることがわかります。
4. 基本オプション
3では「pagination」、「navigation」、「scrollbar」の３つのオプションが出てきましたが、それ以外にもたくさんのオプションがあります。ここではその他の基本オプションを一部ご紹介します。
4-1. autoplay
autoplayはスライドが自動再生されるかどうかをtrueまたはfalseで指定します。初期値はfalse。この設定では3秒スライドを表示してを次のスライドに自動で切り替わります。
const swiper = new Swiper ('.swiper', {
//スライドを無限にループさせる
loop: true,
//自動再生させる
autoplay: true,
});もう少し細かく指定することもできます。指定できる項目は以下のようになります。
const swiper = new Swiper ('.swiper', {
//スライドを無限にループさせるかどうか
loop: true,
autoplay: {
//スライドが切り替わるまでの時間をミリ秒で指定 初期値: 3000
delay: 2000,
//ユーザーがスライドを手動で操作したら自動再生を停止する 初期値:true
disableOnInteraction: true,
//スライドにカーソルを乗せると自動再生を一時ストップする 初期値:false
pauseOnMouseEnter: true,
//スライドを逆方向に自動再生する 初期値: false
reverseDirection: true,
},
});autoplayの設定を変えた5つのパターンのスライダーを作成しました。違いを確認してみてください。
See the Pen Swiper1 by Hiro (@Coffee1610) on CodePen.
4-2. speed
speedはスライドが切り替わるときのアニメーションの速度をミリ秒で指定します。初期値は300(0.3秒)。
const swiper = new Swiper ('.swiper', {
//スライドが切り替わるときのアニメーションの速度を1秒に指定
speed: 1000,
});また、CSSの「.swiper-wrapper」に「transition-timing-function: linear;」を追記し、JavaScriptに「autoplay:{delay: 0}」を指定することでスライドが止まらずに一定速度で動き続けるようになります。
.swiper-wrapper {
/*スライドが切り替わるアニメーションを速度に一定にする*/
transition-timing-function: linear;
}const swiper = new Swiper('swiper', {
//スライドを無限にループさせる
loop: true,
autoplay: {
//スライドが切り替わるときに止まらないようにする
delay: 0;
},
//スライドが切り替わるときのアニメーションの速度を3秒に指定
speed: 3000,
});以下はspeedを300と1000を指定したパターンとスライドが止まらずに一定速度で動き続けるパターンの結果です。動きの違いを確認してみてください。
See the Pen Swiper2 by Hiro (@Coffee1610) on CodePen.
4-3. slidesPerView
slidesPerViewは一度に表示するスライド数を指定でき、数値またはautoを指定します。初期値は１。
const swiper = new Swiper ('.swiper', {
//スライドを無限にループさせる
loop: true,
//スライドを３枚表示する
slidesPerView: 3,
});slidesPerViewが1と3に指定したときの比較が以下のようになります。slidesPerViewが3のときはスライドが３枚表示されているのがわかります。
また、slidesPerViewは小数点以下も指定することができます。
const swiper = new Swiper ('.swiper', {
//スライドを無限にループさせる
loop: true,
//スライドを2.5枚分表示する
slidesPerView: 2.5,
});slidesPerView3と2.5を比較した結果は以下のようになります。slidesPerView3のとは3枚のスライドの幅が均等なのに対しslidesPerViewが2.5のときは左と真ん中のスライドの幅は同じですが右のスライドは幅が狭くなっているのがわかります。
slidesperViewにautoを指定した場合は、CSSで指定したスライダーの幅やスライド間の余白に応じて自動で表示枚数を変えることができます。
const swiper = new Swiper ('.swiper', {
//スライドを無限にループさせる
loop: true,
//スライドはCSSで指定したスライド幅に応じた枚数を表示
slidesPerView: 'auto',
});CSSは「.swiper-slide」のwidthにスライドの幅を指定します。
.swiper{
width: 300px;
height: 200px;
}
.swiper-slide {
/*スライドの幅を20%に指定*/
width: 20%;
height: 100%;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
} 以下がslidesPerViewをautoに指定し、「.swiper-slide」のwidthを20%と33.3%を指定したときの比較になります。widthが20%のときは5枚、33.3%のときは3枚表示されています。
次にwidthが20%でスライドの左右に余白が10%つくように指定します。
.swiper{
width: 300px;
height: 200px;
}
.swiper-slide {
/*スライドの幅を20%に指定*/
width: 20%;
height: 100%;
/*余白を左右に10%つける*/
margin: 0 10%;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
} スライドの余白が0のときと左右に余白が10%ある場合の比較です。
slidesPerViewをautoに指定すると、CSSで「.swiper-slide」の幅やスライド間に余白を持たせるかどうかで表示枚数が変わることがわかります。
4-4. spaceBetween
spaceBetweenはスライド間に余白を数値で指定できます。初期値は0。ただspceBetweenは「px」でしか指定できないので「%」で指定したい場合はCSSで余白を指定する必要があります。指定方法は以下のとおりです。
const swiper = new Swiper('.swiper', {
//スライドを無限にループさせる
loop: true,
//スライドを3枚表示
slidesPerView: 3,
//スライド間の余白を20pxつける
spaceBetween: 20,
});spaceBetweenに0と20を指定したときの比較した結果は以下のとおりです。spaceBetweenに20を指定した場合はスライド間に余白(20px)がついていることがわかります。
4-5. centeredSlides
centeredSlidesは現在表示されているアクティブなスライドを中央に表示するかどうかをtrueまたはfalseで指定します。初期値はfalse。
const swiper = new Swiper('.swiper', {
//スライドを無限にループさせる
loop: true,
//スライドを1.5枚分表示
slidesPerView: 1.5,
//アクティブなスライドを真ん中に表示
centeredSlides: true,
});以下はslidesPerViewを1.5、centeredSlidesをtrue、falseしたときを比較した結果です。この場合、赤枠がアクティブなスライドとなります。
centeredSlidesがfalseのときは赤枠のスライドが左にありますが、trueのときは中央にあるのがわかります。trueの表示方法は実際のWebサイトでよく見ることがありますよね。
4-6. allowTouchMove
allowTouchMoveは手動でスライドの変更を許可するかどうかをtrueまたはfalseで指定できます。初期値はtrue。
デフォルトではドラッグやスワイプで前や次のスライドに切り替えることができますがその操作をさせたくない場合はfalseに指定します。
const swiper = new Swiper('.swiper', {
//スライドを無限にループさせる
loop: true,
//手動でスライドの操作を許可しない
allowTouchMove: false,
});4-7. breakpoints
breakpointsはウィンドウサイズに応じて設定を変更することができます。例えばCSSのメディアクエリのようにPCのときはスライドを３枚表示し、スマホのときは１枚表示するみたいなことができます。
ここでは例として600px未満のときはスライドを１枚、600px以上900px未満のときはスライドを３枚と900px以上のときはスライドを5枚表示するようにします。
記述方法はbreakpoints: {~}の中にウィンドウサイズが600px以上のときは600: {~}と書き、その中に変更するパラメータを指定します。ただ、600px以下みたいな条件の書き方はできないようです。
const swiper = new Swiper('.swiper', {
//スライドを無限にループさせるかどうか
loop: true,
//600px未満のときはスライドを1枚表示
slidesPerView: 1,
//ブレイクポイントの設定
breakpoints: {
//ウィンドウサイズが600px以上のとき
600: {
//スライドを3枚表示
slidePerView: 3,
},
//ウィンドウサイズが900px以上のとき
900: {
//スライドを5枚表示
slidePerView: 5,
}
}
});ここで注意なのはbreakpointsを指定するときはcssの「.swiper」のwidthとheightは相対単位(「%」「vw」「vh」)で指定します。
width、heightを絶対単位(「px」)で指定するとウィンドウサイズを変更時にブレイクポイントを通過しても表示が切り替わりません。
.swiper {
/*widthとheightは相対単位(「%」か「vw」「vh」)で指定する*/
width: 80%;
height: 80%;
}
.swiper-slide {
width: 100%;
height: 100%;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}実行結果は以下のとおりです。CodePenの右上の「EDIT ON CODE PEN」を押して、ウィンドウサイズを変更してみてください。ブレイクポイントを通過したらスライドの枚数が変わることが確認できます。
See the Pen Swiper3 by CODE SQUARE (@Coffee1610) on CodePen.
5. まとめ
今回はSwiperの導入方法と基本的なオプションをご紹介しました。次回はeffectでデザインやアニメーションを変更する方法をご紹介したいと思います。
ご参考になれば幸いです。
