ども。
WEBおじさんです。
今回は、「Swiper」というJavaScriptライブラリのお話です。
現在、私が管理しているお客さんのサイトでSwiperを導入しているのですが、そいつの挙動がおかしくなってしまいました。
まず、「Swiper」とは何なのか？
「Swiper」というのは、スライドショーを作り出すJavaScriptライブラリです。
スライドショーのライブラリっていろいろありますよね。
「Swiper」の他に「Slick」だったり「bxSlider」だったり「FlexSlider2」などなど、その他諸々。
今回はたまたまコーダーさんがSwiperを使ってきたので、それをそのまま導入していたのですが、ある日突然ループの動きなんですかねー？そのあたりの挙動がちょっとおかしな感じだったのに気づきました。
通常、スライドショーのライブラリにはどれもループの機能が入っていたりします。その場合、大抵最初の一枚の右側は「次の一枚」になり、左側は「最後の一枚」になるんです。
で、まぁ導入の仕様によるんですが、一枚が真ん中に表示されて右と左にそれぞれの画像がちょびっとだけ表示されている感じになっていたんですね。
仕組みをちょっと話すと、スライドショーの要素がコピーされて本来自分が記述した要素の前後に配置されるようになっているんですね。
その状態になっているので左側に最後の一枚のちょびっとが表示されるようになっていたのですが、なぜかそれが表示されていないことに気付いた！
でもなぜか左の矢印をクリックするとちゃんと最後の画像が表示される！ｗ
動きはちゃんと機能しているのです！
キモッ！
ということで、検証開始。
まず、最近追加したJSが干渉しているのではないかと疑いをかけました。
最後に確認したのが2/8くらいで、その時は確かちゃんと動いていたんです。
なぜなら、スライドショーの内容をいじったので覚えているのです。
その時点で左側がなければ気付いているはずなので。
で、その時はJSはいじっていない。
というか、それ以降でJSはいじっていない。
ということは、別でJSをいじったヤツに疑いがいく。
別の人がいるんです。JSをいじったヤツが。
そして、なにやら怪しげなJSエラーが発生しているのです。
とはいえ、何もせずいきなり「オメーのJSが悪さしているせいで他のJSに干渉しているから、ちょっと見直せやコラ」というわけにもいかないので、そっちで追加されたJSを一旦全て削除して確認。
すると！なんと！症状改善せず！ｗｗ
なんだよー。。。ちげーのかよー。。。
ということで別の角度から攻めてみる。
・まず、基本的なSwiperの動作は問題ない。
・だけど前後にクローンが作られない。
・つい10日ほど前まではちゃんと動いていることを確認しており、突然おかしくなってしまった。
これ、もしかして、大元のSwiper側のお話ですか？
Swiperのjsはダウンロードしたものをアップしているのではなく、CDNで読み込んでいるので、十分考えられること。
ということで、Swiperのサイトから最新バージョンのCDNを指定してみた。
すると！なんと！表示されたではないか！
こうして、見事な推理により事件は解決されたとさ。
でも困るねー。こういうことがあるからCDNはさー。使うのを迷ってしまうよねー。
せめて最新版は同じファイル名でアップしてもらうとかさ。
提供する側はそれくらいの配慮が必要だよねー。
って、別に金払ってるわけじゃないから偉そうに言えないけどさ。
ということで、皆さんもCDNを使う際はバージョンアップによって仕様が変わってしまって挙動がおかしくなってしまうことがあるので、その場合は必ず使用しているライブラリのバージョンを確認することから始めましょう。
以上、WEBおじさんでしたっ！
