JavaScriptのスライダープラグイン Swiperを使ってみる

Swiperは非常に多くの機能が備わった高機能スライダープラグインです。

特徴

• jQuery非依存
• オプション・コールバック関数が豊富でカスタマイズ性が高い
• 活発に開発されている
• 利用者数が多く、日本語の参考記事も多い
• たくさんの機能を把握するのが大変

Swiper公式サイト

swiperjs.com

CDN
cssファイル

https://cdn.jsdelivr.net/npm/swiper@11/swiper.min.css

jsファイル

https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js:title

html

<div class="swiper-outer">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">1</div>
<div class="swiper-slide">2</div>
<div class="swiper-slide">3</div>
</div><!-- /.swiper-wrapper -->

<div class="swiper-pagination"></div>
</div><!-- /.swiper -->

 <!-- If we need navigation buttons -->
 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>
</div><!-- /.swiper-outer -->

JavaScript

const mySwiper = new Swiper('.swiper', {
slidesPerView: 1, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
spaceBetween: 20,
grabCursor: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},

loop: true,  // 無限ループさせる
loopAdditionalSlides: 1, // 無限ループさせる場合に複製するスライド数

navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

watchSlidesProgress: true,//はみ出ているスライド部分にもクラスを付与する

breakpoints: {
600: {
slidesPerView: 2,
},
1025: {
slidesPerView: 3,
spaceBetween: 32,
}
},
});

b-risk.jp