プログラミング

レスポンシブ対応のスライダーが作れる「Swiper.js」の使い方

スライダーが作れるライブラリ「Swiper」を使えば、次のようなスライダーを簡単に作ることができます。

See the Pen
WNrMymv
by KUBO (@KUBOGEN)
on CodePen.

Swiperの使い方

Swiperを使うには公式サイトよりファイルをダウンロードするか、CDNを読み込む必要があります。

CDNを使用する場合は以下のように読み込みます。(「swiper.min.css」は <head>〜</head>内で読み込み、「swiper.min.js」は </body>の直前などで読み込みます。)

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css”>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js”></script>

ファイルをダウンロードする場合でも「Swiper.min.css」と「Swiper.min.js」を読み込めばOKです。

次にHTMLに以下のように記述します。

HTML
<div class=”swiper-container”>
 <div class=”swiper-wrapper”>
  <!– Slides –>
  <div class=”swiper-slide”>Slide 1</div>
  <div class=”swiper-slide”>Slide 2</div>
  <div class=”swiper-slide”>Slide 3</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>

CSSをカスタマイズすることも可能です。

CSS
.swiper-container {
 width: 600px;
 height: 300px;
}

そして以下のようにスクリプトを記述することで、簡単にスライドを実装することができます。

JavaScript
var mySwiper = new Swiper(‘.swiper-container’, {
 direction: ‘vertical’,
 loop: true,
 pagination: {
  el: ‘.swiper-pagination’,
 },
 navigation: {
  nextEl: ‘.swiper-button-next’,
  prevEl: ‘.swiper-button-prev’,
 },
 scrollbar: {
  el: ‘.swiper-scrollbar’,
 },
})

色々なスライダーを実装できる

基本的な使い方だけ紹介しました。もう少し詳しい説明は別の機会にしたいと思います。

公式サイトにdemoがあり、ソースコードも載っているので、そちらも参考にしてください。

参考
Swiper Demos

Leave a Comment