swiper4・5系をCDN読み込みしていたが動かなくなった！という方へ

どうも、Webデザイナーのレーウィンです。
今回はswiper4・5系についての補足的なものになります。

swiperのcssを

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

にしていて、jsを

<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

にしている方はエラーが出ていると思います。
というのも、swiperのリンク先が変更されてしまいました。だからオプション等を見直しても修正は出来ないという悲しみ・・・。
もし、こちらの件でお悩みの方は
cssを

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

に、jsを

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

にすることで解決できます。
これをするとswiperのバージョンが最新バージョンになります(この記事を書いたタイミングでは6.0.2)。
ただ、4系・5系とはオプションの基本的な書き方は変わらないはずなので、基本的には上記対応でスライダーが正常化されるはずです。

補足１：レスポンシブについて（4系を使っていた人へ）

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

レスポンシブはこんな感じで書いていたと思います。
記述の仕方自体は変更されてないんですけど、
4系以前は「以下」で分岐していたはずです。
それが5系以降のバージョンでは「以上」で分岐してます。
4系からのバージョンアップに合わせてレスポンシブ対応している人はここの対応が必要です。

補足２：IEについて＆旧バージョンのダウンロードについて

Internet Explorerについてのサポートは5系の段階で終了しているので、4系を使っていた方でIEも対応しなければならない方は4系をダウンロードし、それをサーバーにアップロードして使用するのがオススメ。
4系や5系などの過去バージョンについては以下リンクのページ下部にてダウンロードすることができます。
https://github.com/nolimits4web/swiper/
各バージョンのところにある「Download Latest ~」をクリックするとzipファイルがダウンロードされます。
zip解凍後、dist内にある「swiper.min.css」「swiper.min.js」を使えばOK。

補足３：swiper4系・5系をCDNで使いたい人へ

簡略しますが、設置場所に注意。swiperのjsは/bodyの上、cssはheadタグ内。

<!-- 5系のCDNはこちら -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>

<!-- 4系のCDNはこちら -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

5系は最終バージョンの5.4.5までCDNで使えますが、4系は何故か最終バージョンの4.5.3はCDN対応してなく、4.5.1までしかないです。そこまで差はないとは思うけど。
ただ、旧バージョンをCDNで使い続けるのは非推奨。一時的な措置ならいいかもしれないですが、継続して使用する予定なら補足２で書いた先でダウンロードして使うのを推奨します。
旧バージョンのCDNはswiper制作サイドが
「もう5.4.5以前のやつサーバーから消しちゃおうぜ！」
ってなった瞬間リンク切れになってエラーになりますので。

ではでは～。