【忘却録】Swiper.jsでよく使う機能

Web制作学習
2023.02.16

Swiper.js使用時、いつも詰まる部分を注意点としてまとめました。
以下、サンプルコードです。

▼script.js
const swiper1 = new Swiper(".card01 ", {
  centeredSlides: false,
  // Optional parameters
  loop: true,
  slidesPerView: "auto",
  spaceBetween: 19,

  // Navigation arrows
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  breakpoints: {
    768: {
      slidesPerView: 2,
      spaceBetween: 19,
    },
    1078: {
      slidesPerView: "auto",
      spaceBetween: 48,
    },
  },
});

マーカーで色を塗った部分を中心に解説していきます。
（学びはTwitterに都度配信しているので、間にその時のツイートも関連として掲載しました）

複数のswiperを同一ページ内で利用する場合

※コードの該当箇所：黄色マーカー部分

①まず最初に、クラス「.card01」を、クラス「.swiper」と同階層に追加します。

<div class="swiper card01">
　　　<div class="swiper-wrapper">
　　　　　　<div class="swiper-slide">

※通常は追加しなくてもよいのですが、複数のswiperが同一ページ内にある時に追加してあげることで、他のswiperと差別化しています。

②script.jsコード内、以下黄色マーカー部分の名称を変える。
こうすると、JavascriptやCSSで設定した内容が他のswiperに被りません。

const swiper1 = new Swiper(".card01", {

※以降、const swiper2 = new Swiper(".card02", {
のように、数字部分を変更し使い回しました。

activeなスライドの表示位置を指定する方法

※コードの該当箇所：赤色マーカー部分

一番最初のスライドには、クラス「.swiper-slide」だけでなく、同階層にクラス「.swiper-slide-active」も付与されています。

「.swiper-slide-active」がついているスライドの表示位置を真ん中に持ってきたい場合は、以下の様に「true」を設定します。

centeredSlides: true,

▼trueにした時の表示

クラス「.swiper-slide-active」が真ん中のスライドに付与されています。

activeなスライドが真ん中でなくても良い場合は、「false」を指定します。

▼falseにした時の表示（初期値）

クラス「.swiper-slide-active」が一番左のスライドに付与されています。

ハッサク
ハッサク

falseにすると、スライドが左端を起点に見切れず、順に並んでくれます！

スライド開始位置を任意の位置にずらす方法

スライドの位置は、初期値だと以下のように左から順に並んで表示されます。
（初期値のcenteredSlides: false; の状態）

「centeredSlides: true;」を設定しスライドを見切れさせることもできますが、任意の位置にずらしたい！そんな時は、 クラス「.swiper-slide」に「left: -○○px;」を当ててあげればOKです。

▼完成イメージ

一番左のスライドを任意の位置で見切れさせるため「.swiper-slide」に「left: -70px;」を当てた場合。

ブレイクポイントの書き方（レスポンシブ対応の仕方）

※コードの該当箇所：青色マーカー部分

先ほど記載したコードの中で、レスポンシブ設定箇所に色を塗りました。

const swiper1 = new Swiper(".card01 ", {
  centeredSlides: false,
  // Optional parameters
  loop: true,

  // スライドの表示枚数：768px未満の場合　👈SPの設定はここに書く！！！！
  slidesPerView: "auto",
  spaceBetween: 19,

  // Navigation arrows
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  breakpoints: {
// スライドの表示枚数：768px以上の場合　👈TABの設定はここに書く！！！！
    768: {
      slidesPerView: 2,
      spaceBetween: 19,
    },
// スライドの表示枚数：1078px以上の場合　👈PCの設定はここに書く！！！！
    1078: {
      slidesPerView: "auto",
      spaceBetween: 48,
    },
  },
});

注意点は、script.jsに SPはそのまま書く、 TABは768: {}、PCは1078{}の中に書きます。
私はよく768: {}の中に、SPで実装したい内容を書く(width:768px未満で実装したい内容を書く)と勘違いしてました。。

ハッサク
ハッサク

よくコーディング時のブレイクポイントの設定と混合してます😂

▼参考

【Swiper】ブレイクポイントを設定してレスポンシブ対応のスライダーを作る方法
Swiperでブレイクポイントを設定してレスポンシブ対応のスライダーを作る方法について解説。今回は画面幅によってスライドの枚数が変わるような実装をご紹介。
junpei-sugiyama.com

スライドの表示件数の設定

スライドの表示数を設定するには「slidesPerView」を使います。
例えば「slidesPerView: 2」とした場合、画面には スライドが2つ表示されます。

もしスライドを一部見切れさせたい場合は、「slidesPerView: 2.3」のように小数点で刻んであげます。

ハッサク
ハッサク

「slidesPerView: 2.3」にすると、画面にはスライド2枚＋スライドがちょっと見切れて表示されます。

スライド幅を設定する方法

スライドの表示件数は簡単に設定できるけど、スライドの幅をこちらで自由に指定したい・・！

そんな時は、 slidesPerViewを”auto”にし、CSSで直接指定すればOKです。

  slidesPerView: "auto",

※CSSでサイズ指定する場合は "auto"にしてあげる

指定したいスライド幅は、クラス「.swiper-slide」にCSSであてればOKでした。（私の場合）
ただし、以下参考サイトによると、以下の様に推奨されていません。

デザインを調整する際、.swiper-slide に直接スタイルを当てると不具合に繋がる場合があるので要注意。
以下のように中身を囲う要素を作って、それに対してスタイルを当てるのがお勧めです。

<div class=”swiper-slide”>
  <div class=”item”>
    <img src=”img.jpg” alt=””>
    <p class=”text”>テキストが入ります</p>
  </div>
</div>

BRISK　「基本のHTML構造・クラス名」の「.swiper-slide」の説明欄より抜粋
ハッサク
ハッサク

最初、私も上の記述を参考に「swiper-slide」ではなく「item」にスライド幅を設定しました。

ただ、何故か実装できなかったので最終的には「swiper-slide」に直接スライド幅を指定して実装しました。

※ここは私の指定であっているか不明確なため、参考程度として下さい。

なぜかSPだとスライド幅が効かない？

.card01 {
  .swiper-slide {
    width: 34.0278%;

    @include global.mq('sp') {
      width: 93.2161%;
    }
  }
}

上記の様に、SPのwidthを指定しているのに、効かない・・！ということがありました。
結論としては、script.jsのSP設定部分に「slidesPerView: “auto”,」を指定していなかった為です。（以下、黄色のマーカー部分）

const swiper1 = new Swiper(".card01 ", {
  centeredSlides: false,
  // Optional parameters
  loop: true,

  // スライドの表示枚数：768px未満の場合　👈SPの設定はここに書く！！！！
  slidesPerView: "auto",　
  spaceBetween: 19,

  // Navigation arrows
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  breakpoints: {
// スライドの表示枚数：768px以上の場合　👈TABの設定はここに書く！！！！
    768: {
      slidesPerView: 2,
      spaceBetween: 19,
    },
// スライドの表示枚数：1078px以上の場合　👈PCの設定はここに書く！！！！
    1078: {
      slidesPerView: "auto",
      spaceBetween: 48,
    },
  },
});
ハッサク
ハッサク

swiperのブレイクポイントの書き方を、コーディングの設定と混合していたので、最初はなかなか原因が特定できませんでした。。😭

もしSP時にスライド幅が変わらない時は「slidesPerView: “auto”,」が正しい位置にきちんと記載されているか？確認してみましょう。

スライドの高さを揃えたい場合は？

これはとても簡単で、以下の設定ですぐ実装できました。

.swiper-slide {
  height: auto;
  .p-card-type-plan { 👈 swiper-slide直下にある、スライドの中身を囲った要素のクラス名
    height: 100%;
  }

【Swiperカスタマイズ】1枚目のスライドの中央配置と初期状態で3つのスライドを表示する方法
Swiper.jsで初期状態で画像が3枚表示されるスライドショーを作る方法が知りたい。Swiper.jsでスライド間の余白を指定したい。という方のお悩みを解決する記事です。
yuyauver98.me

「PCはスライドなし、SPはスライドあり」の実装方法

※2023.11.16追記

PC　→カードが6枚並ぶ（1行目に3枚、2行目に3枚表示）
TAB →カードが6枚並ぶ（1行目に2枚、2行目に2枚、3行目に2枚表示）
SP　→カードが6枚でスライダー表示

上記の場合、以下コードで実装できた。

Javascript

jQuery(function () {
  //swiper 767以下で起動
  var swiper;
  jQuery(window).on("load resize", function () {
    var w = $(window).width();
    if (w < 768) {
      if (swiper) {
        return;
      } else {
        swiper = new Swiper("#slide3", {
          spaceBetween: 10,
          loop: true, // ループさせる
          speed: 1500, // 少しゆっくり(デフォルトは300)
          // ページネーション
          pagination: {
            el: ".swiper-pagination",
            clickable: true, // クリック可能にする
          },
          // 前後の矢印
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
      }
    } else {
      if (swiper) {
        swiper.destroy();
        swiper = undefined;
      }
    }
  });
});

※参考元：https://white-space.work/swiper-switching-display-on-responsive/
※上記コードは、参考元サイトのコードをもとにカスタマイズ済みのもの
　→ 基本的には同じだけど、w <= 768をw < 768に変えたり、navigationを追加している。


#slide3 には.swiperと同階層のclassまたはidを入れる。

CSS

.swiper-wrapper にカードを横並びにする要素を書く。（display: flexなど）

@media screen and (min-width: 768px) { //←ここはminにして、タブレット迄の適用にする
  #slide3 .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
ハッサク
ハッサク

最初、.swiper-wrapperと同階層に独自のclassを追加し、それに対して横並びになるflexのCSSを当てていた。その独自のclassを、PCで見た時には追加し、SPで見た時には追加しないPHPの条件分岐を書いてたんだけど、タブレットでは表示されなかったり、PCのデザインが崩れたり。。

独自CSSを消して.swiper-wrapperに直にflexを当てて、適応範囲をmin-width: 768pxに変えたら出来た😂

.swiper-wrapperに、
・直にflexのスタイルを当てること
・適応範囲をmin-width: 768pxに変えたこと
は、以下サイトでやり方を知りました。

【Swiper】スマホだけスライダーにする方法(ブレイクポイント切り替え)
Swiperスライダーでブレイクポイントの切り替えでスマホだけスライダーにする方法を解説しています。
junpei-sugiyama.com

旧記事

こちらは本当に参考程度でお願いします。（←自信がない）

キーとなるのは「destroy()」を使用する、です。※使用イメージ：swiper.destroy(false, true)
SPだけスライダーにするために、PCの時にあててあげます。
解説は以下サイトの説明が分かりやすい為、ご確認ください。

【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー | 東京のホームページ制作 / WEB制作会社 BRISK
Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろあり
b-risk.jp

こちらの章に関しては、以下のコードをもとに解説を進めます。

let mySwiper1 = null;
const mediaQuery1 = window.matchMedia("(max-width: 1078px)");

// 1078pxを起点に、スライダーの表示有無を設定
const checkBreakpoint1 = (e) => {
  if (e.matches) {
    initSwiper1();
  } else if (mySwiper1) {
    mySwiper1.destroy(false, true);
  }
};

// 通常のオプション設定を記載(スライド間の余白、表示件数など)
const initSwiper1 = () => {
  mySwiper1 = new Swiper(".card01", {
    loop: false,
    slidesPerView: "auto",
    spaceBetween: 16,
    loopAdditionalSlides: 1,
    speed: 1000,
    grabCursor: true,
    breakpoints: {
      1078: {
        slidesPerView: "auto",
        spaceBetween: 24,
      },
    },
  });
};

mediaQuery1.addEventListener("change", checkBreakpoint1);
checkBreakpoint1(mediaQuery1);

上から２行目にあるこちらのコード。

const mediaQuery1 = window.matchMedia("(max-width: 1078px)");

表示領域が1078px以下になったら、「スライダーなし」から「スライダーあり」に切り替わるブレイクポイントを設定しています。

もし使い回した時にここの数値を変えなかった場合。
例えば「1078px」以下で「スライダーなしからスライダーあり」に切り替わって欲しいのに、使い回した為「max-width: 1297px」という数値のままだった場合。スライダーの動きが本来つかないはずの部分についてしまい、変な状態になります。（以下参照）

表示領域が1297px以下だとスライダーあり、1298px以上だとスライダーなし
ハッサク
ハッサク

コンテンツがinner内に揃っている為、見た目上は全然気付きませんでした・・

変更を忘れても気づかない部分かもしれませんが、忘れず変えるようにしましょう。

その他コードの解説・詳細は、以下サイトが大変分かりやすいため、こちらでご確認ください。

▼参考：「応用04 ブレークポイント切り替えでSPだけスライダーにする」

【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー | 東京のホームページ制作 / WEB制作会社 BRISK
Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろあり
b-risk.jp

スライダーが同一ページ内に複数ある場合

「PCはスライドなし、SPはスライドあり」のスライダーがページ内に複数ある場合は、以下黄色マーカー部分の名称を都度かえる必要があります。

let mySwiper1 = null;
const mediaQuery1 = window.matchMedia("(max-width: 1296px)");

const checkBreakpoint1 = (e) => {
  if (e.matches) {
    initSwiper1();
  } else if (mySwiper1) {
    mySwiper1.destroy(false, true);
  }
};

const initSwiper1 = () => {
  mySwiper1 = new Swiper(".card01", {
    loop: false,
    slidesPerView: "auto",
    spaceBetween: 16,
    loopAdditionalSlides: 1,
    speed: 1000,
    grabCursor: true,
    breakpoints: {
      1078: {
        slidesPerView: "auto",
        spaceBetween: 24,
      },
    },
  });
};

mediaQuery1.addEventListener("change", checkBreakpoint1);
checkBreakpoint1(mediaQuery1);
ハッサク
ハッサク

青色マーカー部分のクラス「.card01」にあわせて、「mySwiper1」のように末尾に1をつけています。そのため「.card02」の場合は、「mySwiper2」のように数字部分だけ変えて上記コードを使い回しています。

const initSwiper1 = () => {
  mySwiper1 = new Swiper(".card01", {

上記の青マーカー部分も、swiperごとに変えてください。

ちなみにクラス「.card01」は、クラス「.swiper」と同階層に追加したものです。

<div class="swiper card01">
　　　<div class="swiper-wrapper">
　　　　　　<div class="swiper-slide">
タイトルとURLをコピーしました