スライダーSwiperの使い方と動かない時に確認すること

メインのスライダーとサムネイルを連動させ、サムネをクリックするとメインスライダーもスライドするようにします。

サムネの方のスライダーを先に記述して、メインスライダーの方に連動するサムネ用スライダーを指定します。HTMLの記述的にはメインスライダーが先なので、慣れないと順番がこんがらがります・・・・^^;;

//サムネの方
const swiper1 = new Swiper('.swiper-demo2', {
  loop:true,
  slidesPerView: 4,
  autoplay: {
    delay: 5000,
  },
});

//大きい方:メイン
const swiper2 = new Swiper('.swiper-demo1', {
  loop:true,
  autoplay: {
    delay: 5000,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  //連動するサムネ用のスライダーを指定する
  thumbs: {
    swiper: swiper1,
  },
});

Swiperが 動作しない場合に確認すること

いざ、設置してみたけど動かない・・・という時に確認してみること。

1. JSファイルの読み込みを確認する
2. CSSの設定を確認する
3. HTMLの構造を確認する
4. オプションの設定を確認する
5. JavaScriptのコードを確認する

JSファイルの読み込みを確認する

Swiper.jsを正しく読み込んでいるかを確認します。この時点で間違えていることも結構あります。

スクリプトファイルのパスやファイル名が間違っていないかなどを確認してみてください。

CDNでJSを読み込む場合：

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

https://swiperjs.com/get-started

CSSの設定を確認する

Swiper.jsのCSSを読み込んでいないと正常に表示されません。表示に必要なCSSが正しく設定されているか確認します。または必要なスタイルを自分で設定しているかを確認してください。

CDNでCSSを読み込む場合：

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

HTMLの構造を確認する

Swiperを表示するためのHTMLが、Swiper.jsの要件を満たしているかを確認します。Swiper.jsを正常に動作させるためには以下のようなHTML、Classが設定されている必要があります。

.swiperと.swiper-wrapperの二つのコンテナが必要です。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">スライド 1</div>
    <div class="swiper-slide">スライド 2</div>
    <div class="swiper-slide">スライド 3</div>
  </div>
</div>

オプションの設定を確認する

Swiper.jsのオプションの設定が正しいか確認してください。特に、必須のオプションが指定されているか、または不要なオプションが指定されていないかを確認します。

JavaScriptのコードを確認する

Swiper.jsを適用するJavaScriptのコードが正しいか確認してください。
Swiper.jsのインスタンスを正しく作成しているか、または必要なイベントが設定されているかを確認してください。

またカンマが足りなかったりやかっこが正確に閉じていないなど、文法エラーが発生していないかも確認します。