jQueryなしレスポンシブ対応/画像スライダー、カルーセル/Swiper.js

公開日：2018/12/22 最終更新日：2021/11/30

javascript カルーセルスライダー

ネットショップ等でよく使われているパーツといえば、画像スライダーです。このブログでもスライダー、カルーセルなど何度も紹介してきました。設置するにあたって、jQueryを利用する必要がありました。

過去に紹介したjQueryを使ったスライダーの一部

ネットショップ運営の気になる備忘録

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の気になる備忘録

[jQuery]FlexSlider.jsサムネイル、カルーセル対応の軽量スライダー

上記で紹介したスライダーも、ある程度簡単な記述で画像スライダー、カルーセル表示を実装することができる便利な仕組みです。本日は、同じ画像スライダーの紹介になりますが、jQuery不要の高性能スライダーについて紹介したいと思います。

jQuery不要の高性能スライダー「Swiper.js」を試してみた

まず、一番の特徴としてはjQueryが必要ないというところではないでしょうか。Web業界の流れは本当に早いもので「脱jQuery」といった言葉も存在します。

また、Webサイトではスマホ対応が必須と言っても良い状態になっていますが、「Swiper.js」はレスポンシブにも対応しているというのも重要なポイントになります。

いろいろなことが出来そうなので長くなってしまいそうな感じもしますが、今回はシンプルな画像スライダーとカルーセル表示の実装方法についてサンプルソースと動作サンプルを掲載してみようと思います。

Swiper.jsを使ったシンプルな画像スライダーの実装方法

jQueryのダウンロードは不要ですが、Swiper.jsのダウンロードは必要です。下記よりダウンロードしてください。

Swiper

ダウンロードしたファイルの中からCSSファイル「swiper.min.css」、Jsファイル「swiper.min.js」が必要となります。

CDN環境にて実装可能な場合は下記ページを参考にURLを確認してみてください。
CDN Swiper

サンプルソース

// ↓↓ファイル名しか指定していませんが、実際はファイルを配置したURLを指定 
<link rel="stylesheet" href="swiper.min.css" />

// 実際はファイルを配置したURLを指定
<script src="swiper.min.js"></script>


// ↓↓表示するためにHTMLタグ
<div class="swiper-container">
    <div class="swiper-wrapper">              
        <div class="swiper-slide">
        	<img src="画像URL">
        </div> 
        <div class="swiper-slide">
        	<img src="画像URL">
        </div> 
        <div class="swiper-slide">
        	<img src="画像URL">
        </div> 
        <div class="swiper-slide">
        	<img src="画像URL">
        </div> 
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

// ↓↓Swiperを動かすための記述
<script type="text/javascript">
var Slider = new Swiper ('.swiper-container', {
    loop: true, 
    speed: 500, 
    slidesPerView: 1, 
    spaceBetween: 0,     
    direction: 'horizontal', 
    effect: 'slide', 
 
    // 自動再生の設定
    autoplay: {
      delay: 3000, 
      stopOnLast: false, 
      disableOnInteraction: true 
    },
 
    // ページネーションの設定
    pagination: {
      el: '.swiper-pagination',　 
    },
 
    // 左右スライドナビの設定
    navigation: {
      nextEl: '.swiper-button-next', 
      prevEl: '.swiper-button-prev', 
    },
  });
</script>

<style>
.swiper-container {
    width: 100%;
}
.swiper-container{
	text-align: center;
}
.swiper-container .swiper-slide img{
	max-width: 100%;
	height: auto;
}
</style>

ソースの解説
1行目から5行目では、headエリア等でダウンロードしたCSS、JSファイルを読み込みます。

8行目から27行目が実際にスライダーを設置したい箇所にHTMLを記述します。このサンプルソースでは、<div class=”swiper-slide”>のブロックが4つ記述されているので、スライダーに表示する画像が4つとなります。実際には表示したい画像の数だけブロックを記述します。

24行目から26行目では、左右のクリックで画像を切り替えるパーツ、黒点で画像を切り替えるパーツを表示するエリアが記述しています。不要な場合は記述なしでOKです。

30行目から57行目で、Swiperを実行するための記述をしています。その際に、どういった動きにするのかなど細かい設定をすることが出来ます。

31行目から37行目で基本の動きを設定
loop: true, ・・・・最後→最初に戻る
speed: 500, ・・・・スライドのスピード
slidesPerView: 1, ・・・・表示する画像
spaceBetween: 0, ・・・・スライド間の余白
direction: ‘horizontal’, ・・・・水平方向にスライド
垂直方向にする場合はvertical 、effectがslideの時のみ有効です。

effect: ‘slide’, ・・・・・動きを指定
他には”fade”(フェード), “cube”(キューブ回転), “coverflow”(カバーフロー) , “flip”(平面回転)など指定することができます。

40行目から40行目は自動再生に関する設定では
delay: 3000, ・・・・3秒でスライドが切り替わる
stopOnLast: false, ・・・・最後のスライドまでいったらストップ(true) or ストップしない(false)
disableOnInteraction: true ・・・・スワイプ操作をしたら自動再生ストップ(true)、ストップしない(false)といった内容を設定しています。

47行目から49行目はページネーション（スライダー下の黒点）に関する設定
HTMLの記述でクラス名としてswiper-paginationをつけていますので、それをページネーションとして指定しています。

52行目から55行目は左右のボタン（左右のスライドナビ）に関する設定
ここもHTMLの記述のクラス名を、左右のナビとして指定しています。

ページネーション、左右のスライドナビが不要な場合は、HTML側の記述も、JS側の記述も不要です。

59行目から70行目では、CSSを記述しています。最初に読み込んだswiper.min.cssで、Swiperのスライダーに必要なCSSは読み込んでいますが、実際に表示する際の微調整を行っています。

幅を100%で表示して、幅が広い場合は中央に表示、中に表示する画像を自動でサイズが小さく切り替わるように調整しています。

このサンプルソースでは、指定することができるパラメーターはほんの一部しか使っていません。もっと細かくいろいろな設定が可能です。参考までに、下記リンクから設定が可能なパラメーターの一覧が確認できます。
Swiperで指定できるパラメーター

動作サンプル(シンプルな画像スライダー)

Swiper.jsを使ったシンプルなカルーセル表示の実装方法

サンプルソース

<script type="text/javascript">
var mySwiper = new Swiper ('.swiper-container', {
    // オプションパラメータ(一部のみ抜粋)
    loop: true, 
    speed: 500, 
    slidesPerView: 3, 
    spaceBetween: 10, 
    centeredSlides : true,
    direction: 'horizontal', 
    effect: 'slide', 
 
    // スライダーの自動再生
    autoplay: {
      delay: 3000, 
      stopOnLast: false, 
      disableOnInteraction: true
    },
 
    // ページネーションの設定
    pagination: {
      el: '.swiper-pagination',
    },
 
    // 前後スライドナビ設定
    navigation: {
      nextEl: '.swiper-button-next', 
      prevEl: '.swiper-button-prev', 
    },
  });
</script>

ソースの解説
基本的には、さきほどのサンプルソースと同じものをベースでOKです。↑にはSwiperを起動する記述の部分のみ記述しています。

slidesPerView: 3, の部分で表示する画像を設定することができます。ここでは3つのスライドが表示されます。

動作サンプル(カルーセル表示)

jQuery不要のスライダーについて紹介しました。jQueryが使えないケースでもスライダーが簡単に実装できるのはありがたいですね。jQueryを使ったパーツをたくさん使っているという場合でも、はやく切替なくてはとあせる必要もありません。jQueryを使った仕組みは、いたるところで使われており、まだまだ現役です。必要なWebパーツを作るのに数多くのプラグインも提供されており、Web上での情報量も豊富で実装しやすい点もあります。

Swiperについてはレスポンシブにも対応しているので、PCだと複数画像を表示、スマホで閲覧すると画像１つ表示といった感じで表示される横幅(デバイスの横幅)に応じて表示を切り替える設定もできるようです。またやり方についてはいろいろと試して別記事にてまとめてみたいと思います。