Swiperが動かない原因はコレ！5つのチェック項目と解決方法

Swiper
記事内に商品プロモーションを含む場合があります。

あれ！？Swiperが全然動かない！

ちゃんとコードを書き写したつもりなのに、なんで動かないの！？

こんにちは。

フリーランスWebコーダーの、たけちです。

Swiperはスライドを作成するとても便利なライブラリですが、「ちゃんとコードを書いたつもりなのに、なぜか動かない…」なんて経験はありませんか？

もしかすると、Swiperが動作せずにパニクっている最中の方もいるかもしれません。

そこでこの記事では、Swiperが動かない原因を特定する方法とその解決法をお伝えします。

この記事を読めば、必ず動かない原因と解決方法が見つかるので、一呼吸おいて、ひとつずつ落ち着いてチェックしていきましょう！

スポンサーリンク

Swiperが動かない5つの原因

Swiperが動かない原因には、大きく次の５つの原因があります。

順にチェックして「真の原因」を特定し、正しく対処するのが、もっとも早い解決法です。

  1. Swiper専用のCSSとJavaScriptは読み込んでいるか？
  2. CSSとJavaScriptを読み込む「場所」は正しいか？
  3. CSSとJavaScriptを読み込む「順番」は正しいか？
  4. HTMLにSwiperの「定型文」を正しく記述しているか？
  5. JavaScriptの記述ミスはないか？

落ち着いて、ひとつずつチェックしましょう。

スポンサーリンク

Swiperが動かない原因を特定し、解決する方法

ここからは、先述した「５つのチェック」に沿って原因を特定し、解決します。

SwiperのCSSとJavaScriptは読み込んでいるか？

Swiperを動かすには、専用のCSSとJavaScriptの読み込みが必須です。

CDNの場合、下記のようにSwiper専用のCSSとJavaScriptを両方、HTMLファイル内で読み込まなければいけません。

<!-- Swiper用CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>

<!-- Swiper用JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

意外と多いのが「CSSだけ」または「JavaScriptだけ」しか読み込んでいないケースですね。

CSSとJavaScriptの両方が読み込まれているか、再チェックしましょう。

Swiperのダウンロード方法やCDNを使った読み込み方法については、Swiperの使い方｜ダウンロード方法からスライダー実装まで解説でわかりやすく書いていますので、参考にしてください。

CSSとJavaScriptを読み込む「場所」は正しいか？

Swiper専用のCSSとJavaScriptですが、読み込む場所は下記のとおりです。

  • CSS：<head>内
  • JavaScript：</body>の直前
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
  <link rel="stylesheet" href="style.css">
</head>
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script src="script.js"></script>
</body>

これ以外の場所だと、Swiperは動かないので、ご自身のコードをチェックしてください。

CSSとJavaScriptを読み込む「順番」は正しいか？

CSSとJavaScriptを読み込む順番を間違えてませんか？

正しい順番は「Swiper専用ファイルが先、自分のは後」です。

たとえばCSSの場合は、次の順番が正しい書き方です。

<!-- Swiper専用CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<!-- 自分のCSS -->
<link rel="stylesheet" href="style.css">

JavaScriptだと、こうですね。

<!-- Swiper専用JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- 自分のJavaScript -->
<script src="script.js"></script>

読み込み順が逆だとSwiperが動かなかったりCSSが効かなかったりするので、注意しましょう。

HTMLにSwiperの「定型文」を正しく記述しているか？

SwiperをHTMLファイル内に記述する際は、指定の書き方でコードを記述なければいけません。

僕はこれを「Swiperの定型文」と読んでいますが、正しく書けているかチェックしてください。

<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>

  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

JavaScriptファイル内に記述ミスはないか？

JavaScriptファイル内に記述ミスがないかを、再度チェックしましょう。

よくあるミスは、次の通りです。

  • インスタンス化（初期化）のミス
  • パラメーター名を間違えている
  • コンマ（,）の付け忘れ

インスタンス化（初期化）のミス

Swiperを使う際に必ず行うインスタンス化（初期化）ですが、ここを間違えると動作しません。

インスタンス化とは、下記のようにJavaScriptの最初に書く「決まり文句」のことですね。

const swiper = new Swiper('.swiper', {});

よくあるのが、クラス名（id名）の間違いです。

Swiper全体を囲むタグにつけたクラス名（またはid名）でインスタンス化されているかをチェックしましょう。

たとえば、デフォルトのままだと、インスタンス化は次の書き方になります。

<div class="swiper">
  <div class="swiper-wrapper">
  <!-- 以下省略 -->
</div>
const swiper = new Swiper('.swiper', {});

「main-slide」というクラス名にした場合は、次のようになります。

※デフォルトの「swiper」は消さないでください。正常に動かなくなります。

<div class="swiper main-slide">
  <div class="swiper-wrapper">
  <!-- 以下省略 -->
</div>
const swiper = new Swiper('.main-slide', {});

idをつける場合は、こうです。

<div id="main-slide" class="swiper">
  <div class="swiper-wrapper">
  <!-- 以下省略 -->
</div>
const swiper = new Swiper('#main-slide', {});

なお、クラスの場合はドット（.）、idの場合はシャープ（#）を先頭に付けているかも、チェックポイントです。

パラメーター名を間違えている

Swiperには様々なパラメーター（オプション）が用意されていますが、1文字でも記述を間違えると正しく動きません。

たとえば、よく使うパラメーターに「breakpoints」がありますが、複数形なので要注意。

「slidesPerView」は、複数形のsだけでなく、途中で大文字が絡むので、沼りやすいです。

const swiper = new Swiper('.swiper', {
  slidesPerView: 1,
  breakpoints:{ // 複数形のSに注意！
    600:{
      slidesPerView: 2,　// 複数形のSや大文字に注意！
    }
  }
});

また、パラメーターに渡す「値」を間違えても正しく動作しませんので、公式ドキュメントで使い方を確認する癖をつけましょう。

コンマ（,）の付け忘れ

パラメーターを複数つなぐ場合は、それぞれをコンマ（,）で区切る必要があります。

付け忘れるとエラーとなり、Swiperは動きません。

なお、最終のパラメーターについては、コンマを省略できます。

const swiper = new Swiper('.swiper', {
  loop: true, //コンマが必要
  slidesPerView: 1 //コンマが必要
  spaceBetween: 10 //最終行は省略可（付けてもOK）
});

下記のように、入れ子が複雑になるとコンマを見落としやすいので、注意しましょう。

const swiper = new Swiper('.swiper', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  slidesPerView: 1,
  breakpoints:{
    600:{
      slidesPerView: 2,
    },
    900:{
      slidesPerView: 3,
    },
  }
});
スポンサーリンク

複数設置したSwiperが動かないケース

複数のSwiperを設置したときに、動かないケースがあります。

２つ以上Swiperを設置する場合は、クラス名（またはid名）を個別にしなければいけません。

この辺りは【Swiper】同じページ内に複数のスライドを設置する方法で正しいやり方を解説していますので、参考にしてください。

スポンサーリンク

今後「Swiperが動かない！」をなくすための対策方法

基本「コピペ」をおすすめします。

手書きだと、どうしても「写し間違い」が発生してしまうからです。

プログラミングでは「コピペ＝悪」と思われがちですが、実はエラーを防ぐ上で「良い行動」だったりします。

記述ミスで貴重な時間を奪われるくらいなら、ガンガン「コピペ」したほうが、開発スピードは上がりますよ。

あと、毎回使うコードはスニペット登録しておくのもオススメです。

僕はSwiperの「定型文」をスニペット登録していて、それぞれ「swiper」と入力すれば一瞬でコードが展開されます。

<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>

  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
const swiper = new Swiper('.swiper', {});

打ち間違いを防ぐ他に、作業スピードも圧倒的に変わるので、おすすめです。

スポンサーリンク

まとめ

今回は、Swiperが動かない原因と解決法を解説しました。

Swiperが動かない原因のほとんどは「書き間違い」で、コピペやスニペットを活用することで、ほとんどを防止することができます。

それでも再び「Swiperが動かない！」というときは、この記事に戻ってきて、１つずつ原因を探ってみてください。