T.W

サムネイル

Swiperを使ってサクッとスライドを作ってみた。

https://swiperjs.com/

インストール

インストール方法は3種類あります。

  • CDN
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
  • NPMでインストール
$ npm install swiper

また、typescriptをお使いの方は以下のコマンドも叩いてください。

$ npm install --save-dev @types/swiper


もう一つ、ファイルをダウンロードして使用する方法もあるのですが今回は割愛とします。興味のある方はご自身でお調べになってください。

Swiperを扱う

では、インストールが完了できたと思うので早速Swiperを使ったスライダーを作っていきましょう。
まずはHTMLです。

<!DOCTYPE html>
<html lang="ja">
 
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Swiper</title>

<!-- CDNを使う場合のみ記述 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>

</head>
 
<body>
  <div class="swiper">
   <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
        src="・・・"
        alt=""
       />
      </div>
      <div class="swiper-slide">
       <img
         src="・・・"
         alt=""
      />
      </div>
      <div class="swiper-slide">
        <img
          src="・・・"
          alt=""
        />
      </div>
    </div>
  </div>
  <!-- CDNを使う場合のみ記述 -->
　　<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
</body>
</html>

こちらが基本の作りです。
.swiper .swiper-wrapper .swiper-slide の3つは必須です。

.swiper-wrapper と .swiper-slide の間に「他の要素を割り込ませたりするとうまく動かなくなる」のでご注意ください。

次にJavaScriptの記述です。

// npmでインストールした場合のみ記述
import Swiper　from "swiper";
import "swiper/swiper-bundle.css";
// -----------------------------------------

const mySwiper = new Swiper('.swiper', {
  // この中にオプションを書いていく。
});

ここまで行うとスライダーが動き出します！

オプション

ここからオプションについて記述していくのですが数が膨大のため私がよく使うオプションだけを抜粋して書きます。

ページング

<div class="swiper">
 <div class="swiper-wrapper">
  <!-- 省略 -->    
 </div>
  <div class="swiper-pagination"></div><!-- 追加 -->
</div>


// npmでインストールした場合、以下の２行を記述しないといけないので注意
import  Swiper, { Pagination } from "swiper";
Swiper.use([Pagination]);
// ----------------------------------------------------

const mySwiper = new Swiper('.swiper', {
  pagination: {
    el: ".swiper-pagination",
    clickable: true, // クリックを可能にする
  },
});

前後の矢印

<div class="swiper">
 <div class="swiper-wrapper">
  <!-- 省略 -->    
 </div>
　　<div class="swiper-button-prev"></div><!-- 追加 -->
  <div class="swiper-button-next"></div><!-- 追加 -->
</div>


// npmでインストールした場合、以下の２行を記述しないといけないので注意
import  Swiper, { Navigation } from "swiper";
Swiper.use([Navigation]);
// ----------------------------------------------------

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

スピード

スライドのスピードを設定できます。デフォルトでは300です。

const mySwiper = new Swiper('.swiper', {
  speed: 500
});

ループさせる

簡単です。下記コードをつけるだけです。

const mySwiper = new Swiper('.swiper', {
  loop: true
});

自動再生

デフォルトでは自動再生されないので、させたい場合はオプションを書く必要があります。

// npmでインストールした場合、以下の２行を記述しないといけないので注意
import  Swiper, { Autoplay } from "swiper";
Swiper.use([Autoplay]);
// ----------------------------------------------------

const mySwiper = new Swiper('.swiper', {
  autoplay: true,
});

パラメータを追記して細かい設定をすることも可能です。

const mySwiper = new Swiper('.swiper', {
  autoplay: {
    delay: 1500, // (デフォルトは3000)1.5秒後に次のスライド
    disableOnInteraction: false, // 矢印またはページネーションをクリックしても自動再生を止めない
  }
});

表示させるスライドの枚数を指定する

指定した枚数分がコンテナ内に収まるように調整される。

const mySwiper = new Swiper('.swiper', {
  slidesPerView: 3 // デフォルトでは1
});

小数点以下の値も指定可能(2.8などの小数を指定すると左右にはみ出たスライダが実装できる)。
CSSでサイズ調整したい場合は‘auto’ を指定。

アクティブなスライドが中央に来るようにする

主に、slidesPreViewの値が小数を指定したときに使用します。

const mySwiper = new Swiper('.swiper', {
  centeredSlides: true,
  slidesPerView:  1.4
});

レスポンシブ

デバイスのサイズによってslidesPreViewの数を変えたいときなどに使います。

const mySwiper = new Swiper('.swiper', {
  breakpoints: {
    // デバイスが320px以上の時
    320: {
       slidesPerView:  1.4
    },
    // デバイスが640px以上の時
    640: {
       slidesPerView:  2.8
    }
  },
  slidesPerView:  1,
  centeredSlides: true
});

スライド感の余白を指定する

CSSで margin を付けるとスライドの位置がずれていくことがあるため、こちらで指定するのが推奨。

const mySwiper = new Swiper('.swiper', {
  spaceBetween: 40 // px
});


先ほども記載しましたが、ここに記載したオプションは本の一部で、僕自身がよく使うものだけ取り上げさせていただきました。なので、ご興味がある方は各自で調べてみてください。また、Jqueryに依存せず使えることやオプションが多くカスタマイズ性が豊かなポイントもグッドです。
皆さんもよければSwiperを使ってみてくださいね。