Swiperが突然の404エラーで画像スライダーが表示されない時
【結論】
以下cdnjs.comからlinkタグ、scriptタグ読み込むようにしたら直りました。
以下、僕が直面した事象をまとめます。
ー もくじ ー
SwiperのCDN読み込みで突然の404、画像スライダーが表示されなくなる
直面した時の事象：Failed to load resource
僕が直面した事象は、
これまで正常にスライダー表示ができていた画像が、ただの画像の羅列表示に変わってしまった
というものです。
まぁJavaScriptにエラーが出てるだろうなーと思いChromeのデベロッパーツールのConsoleを見てみると、「Failed to load resource: The server responded with a status of 404 (Not Found)」のエラーが。
chromeデベロッパーツールのConsole
エラーが出た時にheadに埋め込んでいたスクリプトは以下で、CDNunpkg.com/swiper/〜から読み込んでいました。
エラーになっていたスクリプト
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
試しにURLへ直接アクセスしてみると、やはりCannot find。
何が起きているんだ？と思いswiperjs.comを確認
https://swiperjs.com/get-started/
インストラクションを読むと、CDNのディレクトリ構造とファイル名が変わっている...？
＜CSS＞
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
↓
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
＜JavaScript＞
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
↓
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
GitHubのchangelogを見る
このへんの変更の手がかりを得ようと、SwiperのGitHubを確認。
https://github.com/nolimits4web/swiper/blob/master/CHANGELOG.md
すると、2020年7月3日に「BREAKING CHANGE(重要な変更)」が。"ファイル名の変更あり"とのことなので、完全にこれだ。
【解決策①】unpkg.comから読み込み直す
https://swiperjs.com/get-started/ にある通りにlinkタグ、scriptタグのURLを修正したら直りました。
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
【解決策②】cdnjs.comから読み込む
「swiper cdn」でググると、cdnjs.comがトップに出てきたので、
https://cdnjs.com/libraries/Swiper
ここから読み込んでも直ります。
JavaScript
CSS
これまでは「unpkg.com」から読み込んでいましたが、今後もファイル名やディレクトリが変わって同じことが起きるのが嫌なので、今回はcdnjs.comから読み込むように変更して終了。
