JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

Swiper

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

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

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

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

かかかず
かかかず

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

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

Swiperとは?

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

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

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

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

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

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

Swiperのイラスト スライダーの超定番ライブラリ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;
}

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

さいごに

先生

スライダーを作る時、以前まではjQueryのslickをよく使っていましたが、Swiperは簡単に色々できるライブラリなので、今はこちらを愛用しています。

本当に色々できるので、是非参考にして使ってみてください。