近年、WEBサイトの画像スライダーと言えば「Swiper.js」が主流になってきました。
jQueryを使用せず他プラグイン導入時よりも軽量化を狙えることや、オプション機能の種類の豊富さにより表現の幅が大きく広がったことが人気の理由です。
今回は初心者の方向けに、Swiperの導入方法（Javascript使用）についてご紹介します。
事前準備
ソースを自分のサーバへダウンロードしてローカルファイルとして使用する方法と、オンラインにあるソース（CDN）をURLから直接読み込む方法の２通りあります。
CDNで使う場合
<head>タグ内に、以下のソースをペーストするだけでOK！
<!-- CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<!-- Javascript -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>ダウンロードする場合
- swiper-bundle.min.js
- swiper-bundle.min.css
最低限この２つのファイルがあればOK！
リンクを開きローカルにダウンロードします。
ダウンロードしたファイルを読み込むために、以下のソースを<head>タグ内にペーストします。
<!-- CSS -->
<link rel="stylesheet" href="/※保存したパス/swiper-bundle.min.css" />
<!-- Javascript -->
<script src="/※保存したパス/swiper-bundle.min.js"></script>
スライダーの作成
①HTMLを記述
スライダーの基本となるHTMLを記述していきます。
基本形は以下のソースになるため、そのままコピペして不要なパーツを削除して下さい。
<!-- スライダー全体のコンテナー(必須) -->
<div class="swiper">
<!-- スライダー(必須) -->
<div class="swiper-wrapper">
<!-- 各スライド(必須) -->
<div class="swiper-slide">スライド１</div>
<div class="swiper-slide">スライド２</div>
<div class="swiper-slide">スライド３</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にクラスを追加するのが好ましいです。
<div class="swiper swiper-01">②Javascriptを記述
Javascriptで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',
}
});これで基本のスライダーは動作します。
スタイルなどは別途調整していきましょう。
複数のスライダーを設置したい場合
同じページの中に複数のスライダーを設置したい場合は、コンテナー（.swiper）に別のクラスやIDを指定し、Javascriptでそれぞれの設定を行います。
<!-- HTML -->
<div class="swiper swiper-01">
...
</div>
<div class="swiper swiper-02">
...
</div>/* Javascript */
const swiper01 = new Swiper('.swiper-01',{
/* 1つめのスライダーを設定 */
...
});
const swiper02 = new Swiper('.swiper-02',{
/* 2つめのスライダーを設定 */
...
});
以上で、Swiper.jsの基本の設定は完了です！
slick.jsなどと比べるとクラス名の制約や独自の書き方がありますが、その分豊富なオプションで様々な表現ができるようになり、何よりjQueryに依存せずページの軽量化が期待できますので積極的に活用していきたいですね。
豊富なオプションやサンプルについては、また別途ご紹介していけたらと思いますので、そちらもよろしくお願いいたします♪
