jQuery非依存のカルーセル「Swiper.js」

2018.1.21

JavaScript

はじめに

jQuery非依存でカルーセルを実装できる「Swiper.js」をご紹介します。
軽量、なおかつオプションも豊富なので、実装の幅が広がりそうです。

公式DEMOはこちら

使ってみる

まずダウンロード

こちらから

設置する

CSS、jsの読み込み

パスは適宜変えて下さい。

<link href="assets/css/swiper.css" rel="stylesheet">

<script src="assets/js/swiper.min.js"></script>

カルーセルのサイズを設定

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

カルーセル部分

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

カルーセルを実行

bodyの一番最後に記述するのが推奨されています

<script>var swiper = new Swiper('.swiper-container');</script>

これだけでカルーセルができます。
あとは必要に応じてCSSの変更やオプションを追加していく形になります。

デモ

現場でよく使いそうなカルーセルを3種類作成してみました。
画像は「background-image」で設定しているので、どんな画像サイズでも対応できるはずです。

DEMO

公式DEMOを見てもらうと分かる通り、Swiperには数多くのオプションが用意されています。
使用するオプション以外のCSSは不要なので、上記のデモでは必要最低限のCSS以外は削除しています。
あくまでも一例なので、適宜変更して下さい。

カルーセル3種類

共通設定

.swiper-slide {
  height: 250px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 769px) {
  .swiper-slide {
    height: 400px;
  }
}

ナビ・ボタン付自動再生

<div class="swiper-container horizonal">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image: url(assets/images/1.jpg);"></div>
    <div class="swiper-slide" style="background-image: url(assets/images/2.jpg);"></div>
    <div class="swiper-slide" style="background-image: url(assets/images/3.jpg);"></div>
    <div class="swiper-slide" style="background-image: url(assets/images/4.jpg);"></div>
    <div class="swiper-slide" style="background-image: url(assets/images/5.jpg);"></div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination horizonal-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next horizonal-button-next"></div>
  <div class="swiper-button-prev horizonal-button-prev"></div>
</div>

var horizonal = new Swiper('.horizonal', {
  loop: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.horizonal-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.horizonal-button-next',
    prevEl: '.horizonal-button-prev',
  },
});

ナビ・ボタン付自動再生(フェードイン)

<div class="swiper-container fade">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image: url(assets/images/1.jpg);"></div>
    <div class="swiper-slide" style="background-image: url(assets/images/2.jpg);"></div>
    <div class="swiper-slide" style="background-image: url(assets/images/3.jpg);"></div>
    <div class="swiper-slide" style="background-image: url(assets/images/4.jpg);"></div>
    <div class="swiper-slide" style="background-image: url(assets/images/5.jpg);"></div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination fade-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next fade-button-next"></div>
  <div class="swiper-button-prev fade-button-prev"></div>
</div>

var fade = new Swiper('.fade', {
  loop: true,
  effect: 'fade',
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.fade-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.fade-button-next',
    prevEl: '.fade-button-prev',
  },
});

ナビ・ボタン付自動再生(中央寄せで横にはみ出るやつ)

<div class="swiper-container multiple">
  <div class="swiper-wrapper">
    <div class="swiper-slide multiple-slide" style="background-image: url(assets/images/1.jpg);"></div>
    <div class="swiper-slide multiple-slide" style="background-image: url(assets/images/2.jpg);"></div>
    <div class="swiper-slide multiple-slide" style="background-image: url(assets/images/3.jpg);"></div>
    <div class="swiper-slide multiple-slide" style="background-image: url(assets/images/4.jpg);"></div>
    <div class="swiper-slide multiple-slide" style="background-image: url(assets/images/5.jpg);"></div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination multiple-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next multiple-button-next"></div>
  <div class="swiper-button-prev multiple-button-prev"></div>
</div>

var multiple = new Swiper('.multiple', {
  slidesPerView: 'auto',
  centeredSlides: true,
  loop: true,
  autoplay: {
    delay: 3500,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.multiple-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.multiple-button-next',
    prevEl: '.multiple-button-prev',
  },
});

さいごに

ベーシックなタイプから、縦型、入れ子、パララックス、LazyLoadなど多種多様なオプションが用意されているので使い勝手が良いと思います。
何より単体で動作するのがありがたいです。
参考になればと思います。