Swiperは非常に多くの機能が備わった高機能スライダープラグインです。
■特徴
- jQuery非依存
- オプション・コールバック関数が豊富でカスタマイズ性が高い
- 活発に開発されている
- 利用者数が多く、日本語の参考記事も多い
- たくさんの機能を把握するのが大変
Swiper公式サイト
Swiper – The Most Modern Mobile Touch Slider (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, } }, }); |
参考サイト