Swiperで各スライドごとにCSSをあて、画面サイズで値を書き換える

Cat WEBサイト構築Tag by cubismer
swiper

Swiper融通きかない！と思って調べたところ公式で実現可能という情報を見つけたのでメモとして。

構築環境
JavaScriptwithout jQuery
対応ブラウザIE10+(一部機能は使用不可?)

実現したいこと

  • コンテンツスライダーとしてSwiper 5.3.1を使う
  • 各スライドの中身に対してCSSでスタイリングを行う(スライド内を2カラムにするなど)
  • Swiperのbreakpointsでは対応できないパラメーターを画面サイズに応じて変更する

スライダー全体のCSS設定は検索でそれなりに出てきましたが、スライド単体に対してのCSSとなると情報がなかなか見つからず。

なおSwiperに設定する値の変更に関しては、Swiperに用意されているbreakpointsでは対応できないパラメーターを設定するためのものですが、後述するIE対応のためにも必要になるかもしれないものです。
適当に試したらできただという方法なので、公式サイトに記述があったわけではありません。
こちらも後述しますがブラウザのリサイズには対応していません。

Swiper

細かい説明はしませんので、組み込み方や詳細を知りたい方は上記公式か他サイトでどうぞ。

サンプル


<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><div class="swiper-slide_inner-1">Slide 1</div></div>
    <div class="swiper-slide"><div class="swiper-slide_inner-2">Slide 2</div></div>
    <div class="swiper-slide"><div class="swiper-slide_inner-3">Slide 3</div></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>

</div>


<script>
window.addEventListener('load', function() {
  var swiper = new Swiper('.swiper-container', {
    //以下は今回必要な記述のみを記載しています。
    //ちゃんと動作させる場合はnavigation:などを記述する必要があります。
    watchSlidesVisibility: true, // ←CSSをあてるにはこれが必要
  });
}, false);
</script>

watchSlidesVisibility: trueの指定さえすれば、.swiper-slideの中にHTMLを作って普通にCSSを当てられます。

これで、スライドの中身を2カラムにして画像とテキストを並べたりも実現できます。

ウィンドウサイズでの変更はリサイズ監視していないので、あくまでコンテンツ表示時の一回だけの動作となります。

なお、一応リサイズ監視を試したところ動作や表示が崩れることを確認しました。

一部のパラメーターを書き換えた場合に他の設定や挙動に対して悪影響がでているということなので、breakpointsで対応していない理由を考えると当然の結果かと思います。

参考サイト

Swiperの対応ブラウザ範囲

Swiperの公式サイトに出ていれば良いのですが、調べても出てこなかったので自分で調べるしかありませんが、案件で必要とされているブラウザで用いる機能が動作するかどうかを調べた方が良いです。

Swiper5の最低限の動作(3D機能なしなど)に関しては、とりあえず以下は確認しました。

  • IE10+(開発者ツールによるエミュレート)
  • Edge(まだChrome入る前のもの)
  • ただしbreakpointsを加えるとIE11でも表示崩れる(やや不確定)

breakpointsに関しては付け外しで崩れの有無を確認できましたが、他の要因が影響しているかもしれないので確実とは言い切れない状態です。

最小限のオプションであればIE10で問題はでないので、表示が崩れた場合は設定中のオプションを削って変化を確認するのが良いかもしれません。

なお、IE9以下やその他古い環境に多く対応する場合については以下で触れられています。

If you need most of browsers support then probably you can go with v3

v3を使ってくれということのようです。
過去バージョンに関しては以下で辿っていけるので、場合によってはv4なども検討できるのではと思います。

なおGitでこの手の質問はしないでとフォーラムへのリンクをはっていますが、そのリンクが古くて使えません。

現在は、以下のURLでフォーラムの内容を確認できます。

IE10+でのbreakpoints設定時の不具合

  • .swiper-slideに.swiper-slide-visibleや.swiper-slide-activeなどのクラスが付与されない
  • 左右にスクロールさせるアンカーが動作しない
  • JS自体が動作していない模様

ChromeやFirefoxやSafariでは起こらず、IEのみで上記が発生しました。

breakpointsを消せば正常に戻ったので、対策としては当記事の記述方法でbreakpointsを使わない形にすればとりあえず目的の動作にはなるはずです。

breakpoints

Swiper 5.3.1では、メディアクエリのようにブラウザのリサイズに対応して設定を変更できるbreakpointsは以下のようになっています。


var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

つまり以下のような動作をします。

  • 設定した数値「以上」の画面サイズなら、記述した設定に変更される

なお、日本語のサイトでSwiperが紹介されている場合、設定した数値「以下」というように実際とは逆のことが書かれているものが散見されました。

更新履歴を確認したところ以下を発見。

breakpointsInverse parameter has been removed and now breakpoints behave like with breakpointsInverse: true before.

おそらく上記のbreakpointsInverseパラメータ削除と、デフォルトでbreakpointsInverseがtrueに変更されたのが原因かと思います。

実際に使うバージョンに対応したヘルプと更新履歴を読むことをおすすめします。

結び

Swiperは更新を続けているため、検索で手法や作例を知る時は記事公開や更新の日付に注意した方がよいです(その意味では日付のない技術系の記事の信頼性はかなり低下します)。

もちろん公式の豊富なドキュメントを見るのであればその心配はありませんが、公式では「見つからない」か「見つけにくい」情報は別サイトを頼ることになると思いますので、日付の確認は大事かなと。

4人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄