lazy developers blog

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

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

Swiperとは

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

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

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

パラメータデフォルト説明
loopfalseループを有効にする場合は true を指定します。
speed300スライドが切り替わる間の時間。単位はミリ秒。
autoplay-自動再生を有効にする場合はパラメータを指定します。
pagination-ページネーションのパラメータを指定します。
navigation-ナビゲーションのパラメータを指定します。

autoplayのパラメータ

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

パラメータデフォルト説明
delay3000スライドが切り替わるまでの停止時間。単位はミリ秒。
disableOnInteractiontrue操作後も自動再生が再開されます。

paginationのパラメータ

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

パラメータデフォルト説明
elnullページネーションのセレクタ。
clickabletruetrue の場合、ボタンをクッリクするとスライドが遷移します。

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

パラメータデフォルト説明
nextElnull次へボタンのセレクタ。
prevElnull前へボタンのセレクタ。

さいごに

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