Swiper

JavaScriptのライブラリSwiperを使って縦方向のスライダー

2022年5月4日 6分

スライダーを実装する時に使うことが多いslickに比べ、Swiperはストレスフリーな操作感に加え、jQuery要らずで実装できるので、重宝しています。

この記事ではそんなSwiperを使って、縦スライダーの実装をしてみます。

かかかず

といっても、Swiperのオプションだけで縦にできるので、解説なのかどうかは疑問ですが・・。

是非最後までご覧いただけると嬉しいです。

Swiperとは？
縦方向のスライダーのサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

Swiperとは？

Swiperは、スライダー・カルーセルUIの超定番とも言えるJavaScriptのライブラリです。

Swiperの利用は簡単で、以下3つの方法で利用することができます。

npmでインストール
CDNを利用
ファイルをダウンロードして利用

かかかず

とりあえず試してみたい方は、CDNかダウンロードでトライしてみましょう。

jQuery不要で動くので、ブラウザ上での処理も速くなりスライダー・カルーセルを使う場合にとても重宝します。また、オプションも豊富に用意されている為、カスタマイズもしやすいライブラリです。

以下の記事では、このSwiper.jsについて解説していますので以下の記事もあわせてご覧ください。

2021年12月11日スライダーの超定番ライブラリSwiper.jsの基本と使い方

縦方向のスライダーのサンプル

早速サンプルです。5つの要素を並べて、縦方向に動くスライダーです。

縦のスワイプにも対応しているので、スマホでもスライダーを動かすことができます。

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

実装の手順と方法

それぞれのコードの解説の前に、実装の手順と方法について簡単にご説明します。

Swiperを記述

はじめにSwiper本体を読み込ませる必要があるので、以下のコードをHTMLの <head>〜</head> の中に記述しましょう。

コードを表示

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

この記事では、記述するだけでOKなCDNでの読み込みの場合で進めます。

HTMLを記述

次に、設置したい場所へHTMLを記述します。この記事で記述しているHTMLのコードは以下の通りです。

コードを表示

<section class="slider-part">
  <div class="swiper-container mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide1">Slide 1</div>
      <div class="swiper-slide slide2">Slide 2</div>
      <div class="swiper-slide slide3">Slide 3</div>
      <div class="swiper-slide slide4">Slide 4</div>
      <div class="swiper-slide slide5">Slide 5</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</section>

JavaScriptでSwiperのオプションを記述

次に、JavaScriptのコードをページに記述します。これは、Swiperの動き方を指定するオプションです。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

var swiper = new Swiper(".mySwiper", {
  direction: "vertical",
  slidesPerView: 1,
  mousewheel: true,
  autoHeight: true,
  speed: 1000,
  keyboard: {
    enabled: true,
  },
  mousewheel: {
    releaseOnEdges: true,
    forceToAxis: true,
    sensitivity: 1,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  on: {
    slideChange: function () {
      setTimeout(function () {
        swiper.params.mousewheel.releaseOnEdges = false;
      }, 500);
    },
    reachEnd: function() {
      setTimeout(function () {
        swiper.params.mousewheel.releaseOnEdges = true;
      }, 750);
    }
  },
});

CSSの記述

最後に、CSSの記述をします。

コードを表示

section.slider-part {
    position: relative;
    height: 400px;
    overflow: hidden;
}
section.slider-part .mySwiper {
    height: 100%;
    background: #f1f1f1;
}
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  -ms-touch-action: auto;
        touch-action: auto;
}

.swiper-slide.slide1, .swiper-slide.slide3, .swiper-slide.slide5 {
    background: #daf5ff;
}

ざっくりとしたコードの解説

コードはHTML・JavaScript・CSSの3種です。ざっくりですが、順に解説していきます。

HTML

HTMLは、CDNで記述する内容と、スライダーを設置する内容の2種類です。

まずは、CDNでSwiper本体読み込ませる記述は、以下のコードをHTMLの <head>〜</head> の中に記述します。

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

そして次に、Swiperでスライダーを設置します。コードは以下で、設置したい場所に設置します。

<section class="slider-part">
  <div class="swiper-container mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide1">Slide 1</div>
      <div class="swiper-slide slide2">Slide 2</div>
      <div class="swiper-slide slide3">Slide 3</div>
      <div class="swiper-slide slide4">Slide 4</div>
      <div class="swiper-slide slide5">Slide 5</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</section>

div タグの中で「mySwiper」のclass名がつく要素は、JavaScriptのコードでSwiperのオプション指定でも出てくるので、名前を書き換える場合は、JavaScriptのコード冒頭にある箇所の名称も合わせるようにします。

JavaScript

JavaScriptは、縦方向のオプションにあたる direction: "vertical", を指定して、Swiperのオプションを記述していきます。

var swiper = new Swiper(".mySwiper", {
  direction: "vertical",
  slidesPerView: 1,
  mousewheel: true,
  autoHeight: true,
  speed: 1000,
  keyboard: {
    enabled: true,
  },
  mousewheel: {
    releaseOnEdges: true,
    forceToAxis: true,
    sensitivity: 1,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  on: {
    slideChange: function () {
      setTimeout(function () {
        swiper.params.mousewheel.releaseOnEdges = false;
      }, 500);
    },
    reachEnd: function() {
      setTimeout(function () {
        swiper.params.mousewheel.releaseOnEdges = true;
      }, 750);
    }
  },
});

ここで出てくるパラメータや、モジュールは、Swiperで使える全体のごく一部でこれ以外にたくさんあります。

外部リンク利用できるパラメータやモジュール（英語）

これらのパラメータをいじるだけでも簡単にUIを変更できるので、是非色々いじってみてください。

CSS

スライダーの基本部分にあたるレイアウトはSwiper本体のCSSにあるので、個別に記述するCSSはカスタマイズするコード内容がメインになると思います。

section.slider-part {
    position: relative;
    height: 400px;
    overflow: hidden;
}
section.slider-part .mySwiper {
    height: 100%;
    background: #f1f1f1;
}
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  -ms-touch-action: auto;
        touch-action: auto;
}

.swiper-slide.slide1, .swiper-slide.slide3, .swiper-slide.slide5 {
    background: #daf5ff;
}

上記のコードは、スライダーで表示される各スライドの色味と、表示レイアウトを整える程度の内容です。