Code JavaScript

【初心者向け】画像スライダー「Swiper.js」使い方の基礎とオプション解説

2020年11月4日

 

こんにちは、イケゾーです。

今回は、WEBページでよく使われる「スライダー」の作成方法を解説していきます。
スライダーとは、WEBサイトのトップにある画像のスライドショーの部分をいいます。省スペースに多くの情報を組み込むことができるので、ほとんどのWEBサイトで採用されています。

Swiper公式ドキュメントでは、解説が英語だけ&説明が不十分なので、導入からカスタマイズまで具体例や図を使いながら解説していきます。

(こちらは「サイバー大学」様のサイトを模写したものです)

 

この記事を読むと

スライダーの作り方がわかり、デザインのカスタマイズができるようになります

 

また、当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

【初心者向け】画像スライダー「Swiper.js」使い方の基礎とオプション解説

では、下記の手順でやっていきましょう。
「Swiper」の特長の説明、ダウンロード方法、カスタマイズ方法の順に説明していきます。

 

 

Swiperを使う理由

スライダーと言えば、「slick」「bxSlider」などが人気の3トップでしょうね。なぜ「Swiper」が人気なのか特徴を確認していきましょう。

 

Swiperの良いところ

デザインのカスタマイズが柔軟にできる

レスポンシブ対応をしており、スマホからのアクセスにも対応

多くの人の、画像スライダーの選び方の基準は「カスタマイズ性」です。作りたいデザインがいかに簡単に再現できるか?という点で「Swiper」は優れています。膨大なオプションが用意されており、必ず実現できるようになっています。

 

悪いところもあげておきます。

Swiperの悪いところ

古いブラウザに非対応

公式ドキュメントの解説は英語のみ

 

よって、最新ブラウザ対応をするのならば、カスタマイズ性に優れている「Swiper」はベストな選択でしょう。

 

Swiperのダウンロード

Swiperを使う方法は、「ダウンロード」と「CDN」の2通りあります。

 

ダウンロードして使う場合

Githubへアクセスして、ダウンロードします。

「master branch」をクリックし、バージョンを選択し、「Code」クリックします。

 

「Download Zip」をクリックし、ダウンロードします。

 

ダウンロードした「swiper-Swiper5.zip」を解凍し、「swiper-Swiper5」フォルダの中を確認します。
今回使用するのは、以下の2つです。

  • package/css/swiper.min.css
  • package/js/swiper.min.js

2ファイルを任意の場所に格納し、次のように読み込んでください(ファイルの場所はそれぞれ変更してください)
Swiper.min.jsはbodyの閉じタグ直前で読み込みます

<head>
<link rel="stylesheet" href="./css/swiper.min.css">
</head>
<body>
〜中略〜
<script src="./js/swiper.min.js"></script>
</body>

 

 

CDNで使う場合

CDNで読み込んで使う場合は、Swiper公式から2つをコピーして読み込みます。

https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js
https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.css

 

index.html
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">
</head>
<body>
〜中略〜
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
</body>

 

 

Swiperの基本コード

基本コードを、HTML→JavaScriptの順にみていきましょう。

 

HTMLの基本コード

スライダーのHTML基本構文をみていきます。

一番外側を<div class="swiper-container">で囲み、
その中に、複数のスライド画像を囲む<div class="swiper-wrapper">を、
それぞれの画像を<div class="swiper-slide">で囲むのが基本構文となります。

画像の左右に配置する「ナビゲーション」は、swiper-button-prevswiper-button-nextクラスを持つ空のDIVを入れるだけです。

 

index.html
<div class="swiper-container">
   <div class="swiper-wrapper">
     <div class="swiper-slide"><img src="./images/nature-1.jpg" alt=""></div>
     <div class="swiper-slide"><img src="./images/nature-2.jpg" alt=""></div>
     <div class="swiper-slide"><img src="./images/nature-3.jpg" alt=""></div>
   </div>
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
</div>

 

 

CSSでスライダーのサイズ調整

全体を囲う<div class="swiper-container">に対して、幅と高さを指定します。

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

 

 

JavaScriptの基本コード

スライダーのJavaScript基本構文をみていきます。

記述する場所は、bodyの閉じタグ直前が良いです。(Swiper.jsを読み込んだ後に書く)

index.html
<script src="swiper.js"></script>
<script>
      var swiper = new Swiper('.swiper-container');
</script>
</body>

 

これだけで最低限ではありますが、スライダーが完成しています。
画像を左右にマウスでドラッグすると、画像がスライドすることを確認しましょう

まだ、左右の矢印ナビゲーションは使えませんし、自動再生などもできませんので、これからオプションで設定していきます。

 

 

Swiperのカスタマイズ「オプション」の基本

基本構文の「ここにオプションを記述」の部分に、オプションを追記していきます。

var swiper = new Swiper('.swiper-container', {
 //ここにオプションを記述
});

 

次に、例をあげて説明しますね。

画像を無限ループさせるオプションを有効化します。
loop: true,
と書くと、ループが有効(最後の画像がきたら最初の画像に戻る)になります。

左右のナビゲーション矢印を有効化するオプションを書きます。
navigation: {...}を書き、nextElは「次へボタン」、prevElは「前へボタン」のそれぞれのクラスを指定することで有効化します。

var swiper = new Swiper('.swiper-container', {
 loop: true,
  navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
  }
});

 

 

レスポンシブ対応

画面サイズに応じて、表示する画像の枚数をレスポンシブに設定ができます。

レスポンシブ対応とは

画面サイズが
「768px未満の場合、画像は1枚表示」
「768px以上980未満の場合、画像は2枚表示」
「980px以上1200未満の場合、画像は3枚表示」
「1200px以上の場合、画像は4枚表示」

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  breakpoints: {
    // 768px以上の場合
    768: {
      slidesPerView: 2,
    },
    // 980px以上の場合
    980: {
      slidesPerView: 3,
    },
    // 1200px以上の場合
    1200: {
      slidesPerView: 4,
    }
  }
})

 

これから紹介する各オプションは全て画面サイズ別で設定ができます。

 

 

ナビゲーション矢印の有効化

navigation: {...}を書き、nextElは「次へボタン」、prevElは「前へボタン」のそれぞれの「空のDIV」クラスを指定することで有効化します。

var swiper = new Swiper('.swiper-container', {
  navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
  }
});

 

左右の矢印が使えることを確認してみましょう1

CSSでナビゲーション矢印の位置調整

クラスswiper-button-nextswiper-button-prevに対して、位置(position)を固定します。

.swiper-button-next{
	top: 50px;
}

 

 

1画面に複数枚表示するカルーセル

スライダーには、画像を1枚表示してスライドして順番に表示させるタイプと、同時に複数枚表示する「カルーセル」と呼ばれるタイプがあります。
例では、3枚の画像を表示して、横へスライドできる物を作りました。

これもオプションに1行追加するだけでできるので、ご紹介します。

slidesPerView:3,

 

 

左右の画像をはみ出して表示

カルーセルの応用になりますが、下のように左右の画像が少しだけ見えるようなスライダーをもよく使われています。
これもオプションに2行追加するだけでできるので、ご紹介します。

この場合、1.3なので、左右の合計が3割だけ見えているという設定です。

centeredSlides:true,
slidesPerView:1.3,

 

 

ページネーション

ナビゲーションを矢印でなく、「ドット」に変更します。こちらもよく使われるデザインですよね。
これもオプションで一発!

 

pagination: {
	el: '.swiper-pagination',
	type: 'bullets',
	clickable: 'falese' ,
}

 

 

イケゾー
お疲れ様でした、他にもオプションは大量にあるので試してみてください

 

まとめ

以上で、Swiperの導入からカスタマイズまで解説しました。

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう
  • この記事を書いた人

ikezooo

ご訪問ありがとうございます。 Ikezoooブログ「WEB積み上げ先生」を運営している30歳です。こちらでは、完全初心者からのプログラミング学習を発信しています。

-Code, JavaScript
-, , , ,

© 2021 IkezoooBlog