「何も変えていないのに、スライダーが止まった」

ホームページのトップによくある、写真が横に流れて切り替わる部分。これを「スライダー」と呼びます。

2022年の秋、5〜6年前に制作したサイトで、このスライダーが動かなくなっていることに気づきました。使っていたのは「Boxslider（bxSlider）」という、jQuery（ジェイクエリー）で動くスライダーです。当時はとてもよく使っていた、私にとっては定番の部品でした。

サイトの中身は、ここしばらく大きく変えていなかったはずです。それなのに、ある日突然止まる。Web制作を長くやっていると、こういう「何も触っていないのに壊れた」に何度も出会います。

今回は、そのとき書いた備忘録と、その翌月に別のサイトで同じような相談を受けたときの記録を読み返して、スライダーが動かなくなる理由と、私なりの付き合い方をまとめてみます。

そもそも、スライダーはどうやって動いているのか

初心者の方向けに、少しだけ仕組みを説明します。

スライダーは、HTMLに並べた写真を、JavaScript（ブラウザの中で動くプログラム）で順番に切り替えて見せています。自分でゼロから書くのは大変なので、多くのサイトでは、誰かが作って公開してくれている部品（ライブラリやプラグイン）を読み込んで使います。

Boxsliderの場合は、次の3つがそろって初めて動きます。

1. jQuery本体（土台になるプログラム）
2. Boxsliderのプログラムとデザイン（JSファイルとCSSファイル）
3. 「この部分をスライダーにしてね」という1行の指示

つまり、スライダーは自分のサイトの外から借りてきた部品の組み合わせで動いています。どれか1つが変わったり、読み込めなくなったりすると、全体が止まってしまうのです。

私が実際にやったこと：まず最新版を入れ直す

動かなくなったとき、私が最初にやったのは、jQueryのバージョンを変えたり、読み込む順番を変えたりといった「いろいろ試す」作業でした。正直に書くと、これでは直りませんでした。

最終的に直ったのは、Boxsliderの公式サイトに載っている、その時点で最新の読み込み方をそのままコピーして貼り付ける方法です。当時の組み合わせは次のとおりでした。

• jQuery 3.1.1
• Boxslider 4.2.12（CSSとJSをCDNから読み込み）
• 初期化は $('.slider').bxSlider(); の1行

CDNとは、こうした部品をインターネット上で配ってくれている配布元のサーバーのことです。

結局、何が原因だったのかは、備忘録には書いていません。いま振り返ると、古いjQueryと古いBoxsliderの組み合わせのどこかが、ブラウザの更新や読み込み先の変化に合わなくなっていたのだろうと思います。ただ、これは推測です。

ここから学んだのは、「原因の特定にこだわりすぎず、公式の最新の手順にそろえ直す」のが一番早いことがある、ということでした。古い部品を少しずつ直すより、部品ごと新しくしたほうが確実な場面は多いです。

翌月：別のサイトで「スライダーが動かない」と相談された

その翌月、今度は制作したサイトの方から「スライダーが動かない」という修正の相談を受けました。

このときもBoxsliderでした。前の月のこともあって、「たまたまかもしれないけれど、Boxsliderだけに頼り続けるのは少し不安だな」と感じ、代わりに使えるスライダーを探しました。

そこで見つけたのが「Splide（スプライド）」です。

Splideの良いところは、jQueryがなくても動くことです。読み込むのはSplideのJSファイルとCSSファイルだけで、HTMLを決まった形で書き、

new Splide('.splide').mount();

と1行書けば動きます。表示する枚数やループの有無なども、オプションで簡単に変えられます。過去記事にも書きましたが、実際に使ってみて、実装は本当に簡単でした。

土台になる部品が1つ減るということは、壊れる可能性のある場所が1つ減るということでもあります。これが、私がSplideを選んだいちばんの理由です。

スライダーが動かなくなる、よくある原因

ここからは、私の経験に、一般によく言われる原因を加えて整理します。自分のサイトで同じことが起きたときの参考にしてください。

原因1：jQueryのバージョンが変わった

WordPressには、最初からjQueryが入っています。2020年ごろ（WordPress 5.5〜5.6のあたり）、WordPressに入っているjQueryが大きく更新され、古い書き方のjQueryプラグインが動かなくなったという話がたくさん出ました。

WordPressを自動更新にしていると、自分では何も変えていないつもりでも、土台のjQueryだけが新しくなっていることがあります。「何も触っていないのに壊れた」の正体は、意外とこれだったりします。

原因2：外から読み込んでいるファイルが読めなくなった

CDNなど外部のサーバーから部品を読み込んでいる場合、その配布元の住所（URL）が変わったり、配布が終わったりすると、部品そのものが届かなくなります。

2016年には、WordPressのプラグインで表示していたGoogleマップが、ある日突然表示されなくなったことがありました。Googleマップの仕様が変わり、APIキー（利用者ごとの鍵）が必要になったためです。スライダーとは違いますが、外のサービスの都合で、自分のサイトが急に壊れるという点では同じです。

原因3：jQueryが2回読み込まれている・順番が違う

テーマが読み込むjQueryと、自分で追加したjQueryが両方読み込まれていると、うまく動かないことがあります。また、jQueryより先にスライダーのプログラムを読み込んでしまうと、土台がない状態で動かそうとするので失敗します。

原因4：http と https が混ざっている

サイトをhttpsにしたあとも、部品をhttpで読み込んでいると、ブラウザが安全のために読み込みを止めることがあります。https化のあとにスライダーやボタンが動かなくなったら、ここを疑ってみてください。

初心者でもできる確認方法：ブラウザの「コンソール」を開く

原因を探すときに役立つのが、ブラウザの開発者ツールです。

ChromeやEdgeなら、スライダーが動かないページを開いて、キーボードの F12（Macなら Command＋Option＋I）を押します。開いた画面の「Console（コンソール）」というタブを見ると、赤い文字でエラーが表示されていることがあります。

たとえば、

• $ is not defined や jQuery is not defined → jQueryが読み込まれていない、または順番が違う
• bxSlider is not a function のような表示 → スライダーのプログラムが読み込まれていない
• 404 や Failed to load → 読み込もうとしているファイルが見つからない

といった具合に、だいたいの見当がつきます。エラーの文章をそのまま検索すると、同じことで困った人の記事が見つかることも多いです。

外部の部品に頼るホームページとの付き合い方

スライダーに限らず、ホームページは、たくさんの「借りてきた部品」で成り立っています。jQuery、スライダー、地図、フォーム、SNSのボタン……。どれも便利ですが、作った時点のまま、ずっと動き続ける保証はありません。

長くWeb制作をやってきて、私が気をつけるようになったことを3つ挙げます。

1. 使っている部品と、そのバージョンをメモしておく

「このサイトはjQueryの○○、スライダーは××を使っている」と書き残しておくだけで、何かあったときの調べ方がまったく違います。私のブログの備忘録も、もともとはそのためのものでした。

2. なるべく部品の数を減らす

jQueryがなくても動くスライダーを選ぶ、使っていないプラグインは外す。部品が少ないほど、壊れる場所も少なくなります。

3. 直すときは「公式の最新の手順」にそろえる

古い部品を部分的に直すより、公式サイトの最新の手順で入れ直すほうが早く、確実なことが多いです。Boxsliderのときがまさにそうでした。

まとめ

• スライダーは、jQueryやライブラリなど外から借りた部品の組み合わせで動いている
• 「何も触っていないのに壊れた」ときは、WordPressの更新によるjQueryの変化や、外部ファイルの読み込み失敗を疑う
• 原因を探すときは、ブラウザのコンソール（F12）で赤いエラーを確認する
• 直すときは、公式の最新の手順で入れ直すのが近道になることが多い
• 新しく作るなら、jQueryに頼らないSplideのような部品を選ぶと、壊れる場所を1つ減らせる

古いサイトのスライダーが止まっていても、慌てなくて大丈夫です。仕組みが分かれば、確認する場所はそれほど多くありません。