Swiperの使い方とサンプル！動かない時のチェック項目も！【2022年 JavaScript】

JavaScript

2022.07.01

Swiperとは
Swiperの実装の仕方・CDNで必要ファイルを読み込む
Swiperが動かないときは……

Swiperとは

今最もメジャーなカルーセルスライダーのプラグインモジュールであるSwiper（公式：https://swiperjs.com/）について、読み込みから実装、完成形のサンプルをまとめてみました。

カルーセルスライダーといえば、Slick.jsやOwlCarouselなども有名ですが、現在のところSwiperの一強といっても過言ではありません。

実はSwiperは他のスライダーと違ってjQueryに依存せず、それ単体で動作することが可能です。世間の脱jQueryという風潮に非常にマッチしたカルーセルスライダーとして利用できます。

実はNPMでダウンロード＆import出来ますので、Reactでもネイティブアプリケーション（React Native）でも利用されている画期的なスライダーです。

悩見坂楓

Slick.jsやOwlCarouselはjQueryの読み込み必須だけどSwiperはいらないのね

著者

SlickもOwlもちょっと古く感じてしまうようになってしまったね……

今回は執筆時点（2022年7月）で最新安定板のv8.26を使っていきます。

jQuery非依存なのでもちろんjQueryのバージョンなども気にしなくてOKです。

今回はWebブラウザを前提としているため、node.jsのNPMインストールではなく、CDNでHTML内へ呼び出しする形ですすめます。

Swiperの実装の仕方・CDNで必要ファイルを読み込む

では早速CDNで読み込みをサクッとしておきましょう。簡単ですね。

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

HTMLの<head>内にCSS、JSを読み込む記述をかいてあげます。コーディングの作法としてCSSを最初に読み込んでからJSを読み込むようにしてください。（初心者の方は覚えておいて損はありません。）

必要なJSとCSSを読み込んだら、下記でSwiperを実行します。

const swiper = new Swiper('クラスを「.」付きで指定', {
　　// オプションはここに記載
});
// ↑const は var でも let でも大丈夫ですよ

ちょっと早いですが、まずスライダーのサンプルをお見せしましょう。

Slide 1 – QOOTECHWEB

Slide 2 – QOOTECHWEB

Slide 3 – QOOTECHWEB

…

Swiper実装サンプルコード・DOM構造の意味

上記の単純なスライダーを構築するためのサンプルを記載しておきます。

<!-- メインとなるコンテナを大外に -->
<div class="swiper">
  <!-- ラッパーで包んであげて -->
  <div class="swiper-wrapper">
    <!-- スライドする要素たち -->
    <div class="swiper-slide c-01">Slide 1 - <span class="contInLogo">QOOTECHWEB</span></div>
    <div class="swiper-slide c-02">Slide 2 - <span class="contInLogo">QOOTECHWEB</span></div>
    <div class="swiper-slide c-03">Slide 3 - <span class="contInLogo">QOOTECHWEB</span></div>
    ...
  </div>
  <!-- ページネーションがいるときか下記を追記 -->
  <div class="swiper-pagination"></div>

  <!-- 左右のナビゲーションボタンが必要であれば下記も追記 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- スクロールバー表示したいときは下記を追記 -->
  <div class="swiper-scrollbar"></div>
</div>

<div class=”swiper”>: メインとなるコンテナを大外に配置。
<div class=”swiper-wrapper”>: ラッパーで包んであげて。
<div class=”swiper-slide”>: スライドする要素たち。
<div class=”swiper-pagination”>: ページネーション。
<div class=”swiper-button-prev”>: 「前へ」のナビゲーションボタン。
<div class=”swiper-button-next”>: 「次へ」のナビゲーションボタン。
<div class=”swiper-scrollbar”>: スクロールバー表示。

.swiper {
  width: 600px;
  height: 300px;
  color: #FFF;
  font-weigh: bold;
}
@media screen and (max-width:480px) {
.swiper {
  width: 100%;
}
}
.contInLogo {
  font-family: "Unica One";
}
.swiper-slide.c-01 {
  background-color:#d90368;
}
.swiper-slide.c-02 {
  background-color:#00c300;
}
.swiper-slide.c-03 {
  background-color:#3b5998;
}

const swiper = new Swiper('.swiper', {
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

縦（垂直方向）へのスライドもお手の物

Slide 1 – QOOTECHWEB

Slide 2 – QOOTECHWEB

Slide 3 – QOOTECHWEB

…

const swiper = new Swiper('.swiper', {
  direction: 'vertical', // これを入れると縦にスクロール
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

Swiperのオプションdirection: 'vertical'を指定してあげると垂直方向にスライドが動くようになりますね。

ちょっと変わったスライダーにしたい

Swiperには様々なオプションが用意されており、それらを組み合わせることで少し個性的なスライダーへとカスタマイズが簡単に出来るのも特長です。

Freemodeというオプションを使えば、ユーザーの好きな位置でスライダーを止めたりスクロールしたりすることが出来ます。スルスルとスクロールするのでストレスフリーです。

Slide 1 – QOOTECHWEB

Slide 2 – QOOTECHWEB

Slide 3 – QOOTECHWEB

Slide 4 – QOOTECHWEB

Slide 5 – QOOTECHWEB

Slide 6 – QOOTECHWEB

Slide 7 – QOOTECHWEB

Slide 8 – QOOTECHWEB

Slide 9 – QOOTECHWEB

…

このFreemodeですが、Slick.jsには無い機能になりますので、こういった動きを望むのであればSwiperを使うことをおすすめします。あ、ソースですが、

let sub02 = new Swiper('.swipersub02', {
  slidesPerView: 3, // スライダーの表示個数
  spaceBetween: 0, //　スライダー間のマージン(「px」を省いて記述、実際はpx分隙間が空く)
  freeMode: true, // Freemodeでもfreemodeでもなく、Mが大文字なので注意
  pagination: {
  el: ".swiper-pagination",
  clickable: true,
  }
});

になります。

他にも、UIinitiativeというサイトのテンプレート＆プラグインを使うとぐっとハードルは高くなりますが、面白い動きを実装することが出来ます。興味がある方は是非いろいろ触ってみてください。ただし、サンプルページにはネイティブアプリケーションでのみ動作するものも混じってますのでご注意くださいね。