簡単にスライダーを実装できるSwiper.jsの使い方

Webサイトでスライダーを実装するとき、いろんなライブラリがある中で、どれを使用すればいいのか迷ってしまいます。
今回紹介する Swiper は、jQuery 等のライブラリを使用せず、簡単にスライダーが実装できるため、初心者にもおすすめです。

Swiperとは

SwiperはjQueryのようなライブラリを必要としない、javascriptのスライダーで、スマホやタブレットなどのモバイル端末のタッチ操作に対応した高機能なスライダーです。
ライセンスはMITライセンスになっています。

• Swiper

Swiperの使い方

最初にSwiperのライブラリを読み込みます。
CDNを使って読み込む方法と、jsファイルをダウンロードしてきて読み込む方法がありますが、ここではCDNを利用して読み込みます。

CDNを使用して読み込む方法

スライダーを追加するページのheadに下記の2行を追加します。

1<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
2<script src="https://unpkg.com/swiper/swiper-bundle.min.js">

スライダーの作成

次に、実際に画像のスライダーを作っていきます。
スライダーを追加するページ内に下記のコードを追加します。

1<div class="swiper-container">
2  <div class="swiper-wrapper">
3    <div class="swiper-slide"><img src="img/image01.jpg" alt="画像1"></div>
4    <div class="swiper-slide"><img src="img/image01.jpg" alt="画像2"></div>
5    <div class="swiper-slide"><img src="img/image01.jpg" alt="画像3"></div>
6  </div>
7  <div class="swiper-pagination"></div>
8  <div class="swiper-button-prev"></div>
9  <div class="swiper-button-next"></div>
10</div>

最後に、先ほど読み込んだ script の下に、下記のコードを追加します。

1<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
2<script src="https://unpkg.com/swiper/swiper-bundle.min.js">
3<script>
4var swiper = new Swiper('.swiper-container', {
5  loop: true,
6  speed: 1000,
7  autoplay: {
8    delay: 4000,
9    disableOnInteraction: false,
10  },
11  pagination: {
12    el: '.swiper-pagination',
13    clickable: true,
14  },
15  navigation: {
16    nextEl: '.swiper-button-next',
17    prevEl: '.swiper-button-prev',
18  }
19});
20</script>

これを実行すると、以下のような動きになります。
（画像の部分はcssに置き換えてあります。）

See the Pen Swiper.js by goodlife.tech (@goodlife-tech) on CodePen.

Swiperのオプション

Swiperには豊富なオプションがあり、動きを変更したい場合はオプションを変更することで対応することが出来ます。
詳しくは下記を参照してください。

• Swiper API

ここでは、先ほどのスライダーのオプションを説明します。

autoplayのパラメータ

autoplayに設定するパラメータの一部です。

paginationのパラメータ

paginationに設定するパラメータの一部です。

navigationのパラメータ

navigationに設定するパラメータの一部です。

さいごに

今回は単純なスライダーの実装方法を説明してみました。Swiperにはここで紹介した以上の機能がたくさんあります。ぜひ、自分で試行錯誤して好みにあったスライダーを作ってみてください。