Swiper を複数設置したい。

プレーンなSwiperであればかんたんに複数設置可能です。場合によっては各Swiperにユニークな指定をする必要があります。くわしくはこちら。

Swiper をスマホのみ表示したい

Swiperはスマホ、PCなどのブレークポイントに応じて切り替えることができます。

Swiperが突然動かなくなった。

SwiperのCSSやJSをCDNで使っていませんか？最新のものに変えれば動くようになります。くわしくはこちら。

軽量スライダーSwiperでスマホ（SP）のみスライダー表示にする方法（複数対応）

Q: Swiperが突然動かなくなった。

SwiperのCSSやJSをCDNで使っていませんか？最新のものに変えれば動くようになります。 くわしくは こちら 。

公開日: 2022.12.17
メンテナンス日: 2023.01.21

JavaScript html

Webサイトでスライドショー（スライダー）は便利ですよね？私は jQuery 不要の軽量Swiper というライブラリを愛用しています。

昨今レスポンシブが主流となり UI も多様化してスマホではスライダー、PCでは適用しないなどの実装をすることもありますよね？
Swiper ではスライダーをスマホだけで表示したい場合もカンタンです。ただこれはスライダーが一つのみのお話。

複数のスライダーで切り替えをしたいときにはコツがあるのでその方法もご紹介します。

この記事を書いた人

かみーゆ/フロントエンドエンジニア

資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハイボール。

この記事の対象者はこんな方です。

かみーゆ

以下心当たりのある方への必見お役立ち記事です。

Swiper を使ったことがある、もしくはJSは使い慣れていてなんとかなりそう
Swiper をスマホもしくはPCのみで使いたい
表示切り替えが必要なSwiperがページ内に複数ある
スライダーを実装したいけどスマホで次のスライドをほんの少し見せたい
jQuery は使いたくない

Swiper とは？

Swiper とは、最新の無料で使えるモバイルタッチに対応したスライドショー用の JavaScript の jQuery 不要の軽量ライブラリです。

npm や CDN も用意されています。Angular、React や Vue.js などからも使うことができます。

Swiper 基本の使い方

実装方法です。

ざっくり使い方を紹介します。

今回紹介するのは、CDN のリンクを貼るだけの簡易的な方法です。
他の方法は Get start をご確認ください。

CDN の JS&CSS のリンクをを head タグ内などに読み込みます。

HTML

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

CDNソースへのリンクは2022年12月現在参照です。必ず Get start から最新のリンクをご確認ください。

スライダーの HTML は以下。今回はクラス swiper を付与した要素にスライダーを適応します。もちろん、IDなどでも指定可能です。ページネーションなどの部品を追加したい場合はクラスを指定した要素を追加します。

HTML

<!-- Slider のメインのコンテナー -->
<div class="swiper">
  <!-- ラッパー -->
  <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 class="swiper-pagination"></div>

  <!-- 次へ前へ（ページネーション）ボタンが必要な場合 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- スクロールバーが欲しい場合 -->
  <div class="swiper-scrollbar"></div>
</div>

JSは以下のように指定します。ページネーションやその他の部品が必要な場合は要素にクラスを指定します。

JavaScript

const swiper = new Swiper('.swiper', {
  // オプション、ループしたい場合は以下
  loop: true,

  // ページネーションが必要な場合要素のクラスを指定する場合
  pagination: {
    el: '.swiper-pagination',
  },

  // 次へ前へ（ページネーション）ボタンが必要な場合要素のクラスを指定
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // スクロールバーが必要な場合
  scrollbar: {
    el: '.swiper-scrollbar',
  },
}, false);

Swiper でスマホ、PCで切り替える方法（単体）

では実際に一つのSwiperを切り替えてみましょう。

仕上がりイメージは以下のような感じです。

destroy() で一度作ったスライダーを破棄できます。SPサイズに切り替えたときにスライダーを再構築します。

JavaScript

window.addEventListener('DOMContentLoaded', () => {
  // option は使い回すので別に書く
  const options = {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    spaceBetween: 30,
    slidesPerView: "auto",
  }
  const breakPoint = 768;
  let swiper;
  if ( window.innerWidth <= breakPoint ) {
    swiper = new Swiper('.swiper', option);
  } else {
    swiper = undefined;
  }
  window.addEventListener('resize', () => {
    if ( window.innerWidth <= breakPoint ) {
      if( swiper ) return;
      swiper = new Swiper('.swiper', option);
    } else {
      if( !swiper ) return;
      swiper.destroy();
      swiper = undefined;
    }
  }, false);
}, false);

PC表示で適宜スタイルを打ち消します。

css

@media screen and (min-width: 768px) {
  .swiper-button-prev, .swiper-button-next {
    display: none;
  }
  .swiper-wrapper {
    display: flex;
    gap: 24px;
  }
  .swiper-slide {
    width: calc(33.333% - 16px);
  }
}

PCのみにスライダーを適応したい時

今回はスマホになったときにスライダー表示に切り替えていますが、コードを変えれば逆も可能です。

JavaScript

if ( window.innerWidth <= breakPoint )
↓↓↓
if ( window.innerWidth > breakPoint )

補足・次のスライダーを少しだけ見せたい

スマホなどではよく次にスライダーがあることを示唆するために、次のスライダーをチラ見せする手法をよく使います。

その場合は、option の slidesPerView を "auto"に指定し

JavaScript

const options = {
  slidesPerView: "auto",
}

width を任意の幅に指定します。

css

.swiper-slide {
  width: 80%;
}

デモサンプル Swiper for SP | CodePen

複数のSwiperをスマホ、PCで切り替える方法

複数の場合は各スライダーにユニークな指定をする必要があります。

この場合はそれぞれのスライダーにIDを swiper01 、 swiper02 とします。

HTML

<div class="swiper" id="swiper01">
  <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 class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<div class="swiper" id="swiper02">
  <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 class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

IDとともに .swiper も付与します。そのスライダー document.querySelectorAll で取得し、配列に格納します。

配列に格納した配列をコントロールします。

このコードであれば、1〜複数のスライダーをコントロール可能です。

JavaScript

let swipersItems = [];
const breakPoint = 768;
let swipers = document.querySelectorAll('.swiper');
window.addEventListener('DOMContentLoaded', () => {
  const options = {
     navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    spaceBetween: 30,
    slidesPerView: "auto",
  }
  // IDを格納
  swipers.forEach((element, index) => {
    if ( window.innerWidth <= breakPoint ) {
      swipersItems[index] = new Swiper('#' + element.id, options);
    } else {
      swipersItems[index] = undefined;
    }
  });
  window.addEventListener('resize', () => {
    swipers.forEach((element, index) => {
      if ( window.innerWidth <= breakPoint ) {
        if( swipersItems[index] === undefined ) {
          swipersItems[index] = new Swiper('#' + element.id, options);
        }
      } else {
        if( swipersItems[index] !== undefined ) {
          swipersItems[index].destroy();
          swipersItems[index] = undefined;
        }
      }
      return;
    })
  }, false);

}, false);