2021.01.26限られた領域で視覚的に情報を伝えるために、画像スライダーは有効です。この記事では、スライダーを自作する方法やWordPressで使える便利なスライダーのプラグインを紹介します。目次スライダーのデモjQueryの勉強のために、画像スライダーを自作しました。画像の左右に表示される矢印で前後の画像へ移動できます。画像下部のドットインジケーターで任意の画像まで一気にスクロールできます。fa-angle-right"></i></div></div>スライダーを表示するHTMLは上のようになります。「slide」というクラス属性を付けたタグで画像を囲います。Awesomeを使っており、別のアイコンに変えることも簡単です。その他の主な特徴は、以下の通りです。十分にテストをしているわけではなく、不具合があるかもしれません。記事内容は自己責任で参考にしてください。スライダーを自作して思ったこと始める前はそんなに難しくはないと思いましたが、やってみると想像以上に面倒に感じました。以下のようなことを考慮する必要があります。スマホでスワイプしたときにスライドさせるかマウスでドラッグしたときにスライドさせるか最初と最後の画像では一方の矢印を表示しない一つのページに複数のスライダーを設置するケーススライダーを表示した後に、ブラウザのサイズを変更するケースそもそも、スライダーを表示するプラグインは既に多く存在するため、苦労して自作するメリットは少ないと思います。有名なものでいえば「slick」というjQueryのプラグインがあります。使い方は非常に簡単で、slickをダウンロードして5分ほどで上のようなスライダーを表示できます。slickは無料で使えて、レスポンシブ対応しています。オプションを指定すれば、自動再生や垂直方向のスライドなど様々なカスタマイズも可能です。実際に使ったことがありますが、こちらも簡単です。Blocks」というプラグインがあります。使い方は、まずは以下のようにプラスのボタンをクリックして、メディアライブラリから画像を選択します。管理画面の右側で、矢印やドットインジケーターを表示するか、スライドアニメーションの速度などを設定すれば、スライダーを表示できます。ブロックエディターなのでプログラムを書く必要はなく、メディアライブラリから画像を選択できるのでimgタグすら書きません。そのため、クライアントに納品する場合など、専門知識がない方でも使いやすいです。以上のように、スライダーを簡単に表示できる便利なプラグインが既に多くある中で、自作する意味はありません。自作することにメリットがあるとしたら、特殊な仕様で既存のプラグインでは対応できないケースや、簡易的なスライダーで十分なケースなどが考えられます。「ドットインジケーターは表示しない」、「一つのページには一つのスライダーしか設置しない」、「スマホのスワイプではスライドしない」といった限定された機能であれば、とても簡単なプログラムで実現できます。スライダーのプラグインは機能が豊富ですが、使わなければ意味がありません、スライダーを自作すれば、余計なプログラムを読み込まないで済みます。今回作成したスライダーのプログラムは以下の通りです。私が勉強のために作成しただけなので、正直あまり良いプログラムとは言えません。強引な部分や理解が足りていない部分もあります。そのまま使うのではなく、部分的に参考にするのが良いと思います。}}分かりにくいと思う部分を少し補足します。スライダーの仕組み表示するスライドやドットインジケーターには「active」というクラス属性を付与して、見た目や動きを制御しています。スライダーに表示する画像をCSSのfloatを使って横に並べて、jQueryのanimateという関数で右端からの距離を変えることでスライドさせています。スライダーがない場合スライダーが画面上にない場合は処理を終了しています。特定のページだけにスライダーを設置する場合は、それ以外のページではスライダーのJavaScriptファイルを読み込まない方が表示速度は上がると思います。一つのページに複数のスライダーを設置するケースを想定して、それぞれのスライダーに「slide1」「slide2」という形でID属性に連番を付与しています。セレクタではそれを親要素に指定することで、対象のスライダーに操作を絞っています。矢印とドットインジケーターのサイズresizeArrow、resizePointerという自作の関数で、表示領域に応じて矢印とドットインジケーターのフォントサイズを動的に変更しています。そのため、パソコンなどで表示したときに、画像は大きいのに矢印とドットインジケーターだけ小さいといった違和感を解消できます。outerWidthというjQueryの関数でスライダーの横幅を取得して、その一定割合をフォントサイズに指定しています。スワイプしたときのスライドsetSwipeという自作の関数で、スマホをスワイプしたときにスライドさせています。矢印とドットインジケーターだけでスライドさせる場合には不要です。touchstart、touchmove、touchendというイベントを使い、横にスワイプした距離を取得して、一定距離を上回る場合にスライドさせています。これによって、画像に触れただけの状態など、意図しないスライドを防いでいます。WordPressで自作のスクリプトファイルを読み込むには、以下のようにfunctions.phpでwp_enqueue_scriptを使うのが一般的です。*上に表示された文字を入力してください。