スライダープラグイン「Swiper」の基本の使い方
「Swiper」は、レスポンシブ対応のスライダープラグインです。
スライダープラグインは数多くありますが、「Swiper」はjQuery等のライブラリを使わず、それ単体で動作するのが特徴です。
当記事では、Swiperを使うために最低限押さえておきたいポイントをまとめます。
公式サイト ： https://swiperjs.com/
jsDelivr ： https://www.jsdelivr.com/package/npm/swiper
プラグインのJS&CSSを読み込む
今回はCDNを使って読み込みます。
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<!-- JS -->
<script src="//cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>ローカルにダウンロードして使いたい場合は、公式のjsDelivrから。過去バージョンも入手できます。
シンプルなスライダーの作り方
当記事では基本的な使い方として、ごくシンプルなスライダーのサンプルコードをご紹介します。
See the Pen Untitled by mgtnsn (@mgtnsn) on CodePen.
ソースコードの抜粋・解説
上記のサンプルでは、親の <div id="js-swiper"> に対してswiperを実行しています。
下層にある<div class="swiper-slide"> がスライダー1枚になります。
また、ナビゲーション（矢印／ドット型）用のクラスもHTML内にあらかじめ記述しておきます。
<div class="swiper" id="js-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><span>1</span></div><!-- 1枚目 -->
<div class="swiper-slide"><span>2</span></div><!-- 2枚目 -->
<div class="swiper-slide"><span>3</span></div><!-- 3枚目 -->
<div class="swiper-slide"><span>4</span></div><!-- 4枚目 -->
<div class="swiper-slide"><span>5</span></div><!-- 5枚目 -->
</div>
<div class="swiper-pagination"></div><!-- ドット型ナビ -->
<div class="swiper-button-prev"></div><!-- 前へ -->
<div class="swiper-button-next"></div><!-- 次へ -->
</div>実行時のオプションには、自動再生やナビゲーション、無限ループの設定を記述しています。
const mySwiper = new Swiper('#js-swiper', {
loop: true, //無限ループ
autoplay: { //自動再生
delay: 3000, //自動再生の速度
},
//前へ・次への矢印ナビを表示
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//ドット型のナビを表示
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});.swiper.swiper-●●というクラスにはプラグイン提供のスタイルがあたっていたり、処理のトリガーとなっていたりします。この名前は変えずに使いましょう。つまり、Swiperを使ったスライダーをページ内に2つ以上設置する場合はこれらのクラスが重複します。スタイル調整などをするときは、そのスライダー固有のクラス・IDを別途付けるのがおすすめです。
その他に覚えておきたい機能
Swiperを導入するうえで覚えておきたい、ちょっとした応用をまとめます。
PCとSPでオプションを変更する（レスポンシブ対応）
responsive オプションを使うと、ブレークポイントごとに設定を変えることができます。
ただし、responsive による変更に対応していないオプションもあるので注意しましょう。
以下は、画面サイズが「640px未満は1枚ずつスライド」「640px以上は3枚ずつスライド」させる例です。
See the Pen Untitled by mgtnsn (@mgtnsn) on CodePen.
const mySwiper = new Swiper('#js-swiper', {
slidesPerView: 1, //1枚ずつスライド
loop: true,
autoplay: {
delay: 3000,
},
breakpoints: {
768: { //ブレークポイント(px)
slidesPerView: 3, //3枚ずつスライド
spaceBetween: 10, //余白10px
}
},
});スクロールバーを表示する
Swiperではちょっとした記述でスクロールバーが実装できます。デザインはCSSでカスタマイズ可能です。
個人的には、これが理由でSwiperを採用することも多いです。
ただし無限ループ（loop: true）との併用はNGです。クローンの数もカウントされてスクロールバーの位置がズレてしまいます。
※ 下記サンプルは「右端までいったら左端に戻る」動きでこれもループといえばループですが、こちらは autoplay による挙動で、クローンが作られるものではないため問題なく動作します。
See the Pen Untitled by mgtnsn (@mgtnsn) on CodePen.
<div class="swiper" id="js-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><span>1</span></div><!-- 1枚目 -->
<div class="swiper-slide"><span>2</span></div><!-- 2枚目 -->
<div class="swiper-slide"><span>3</span></div><!-- 3枚目 -->
<div class="swiper-slide"><span>4</span></div><!-- 4枚目 -->
<div class="swiper-slide"><span>5</span></div><!-- 5枚目 -->
</div>
<div class="swiper-scrollbar"></div><!-- スクロールバー -->
</div>const mySwiper = new Swiper('#js-swiper', {
autoplay: {
delay: 3000,
},
scrollbar: {
el: '.swiper-scrollbar',
},
});