【WPプラグイン配布】流れる画像スライダー作ってみました♪
はじめに
前回の記事では、AIを相棒にプラグインを開発した裏話をお届けしました。 今回は、画像スライダーを作ってみました。
よくあるスライダーではなくて流れるようにスライダーします。
SWELL等の「リッチカラム」を駆使すれば作れたり、探せば別のプラグインが出てくると思いますが、
多機能過ぎ、UIが英語等で使いづらいプラグインが多かったため、誰でもかんたんに設定できる軽量なループスライダーを作っちゃいましたよ。お
百聞は一見にしかず。
これです。（ろくな画像がなくすみません。）
こんな機能追加して！とか言う方は、まず自分でAIを相棒に修正してみてください！
プラグインをダウンロード
DigitalOnion_photo_slider 使い方ガイド
Plugin Version 1.0 / Author: Awaji_Tamao
1. スライダーの準備（画像登録）
WordPressメニューの 「設定」＞「DigitalOnion_Slider」 から設定を行います。
- スライダーの選択: 上部のタブで「スライダー 1」〜「スライダー 5」を切り替えて個別に設定できます。
- 画像の一括追加: 「画像を一括選択して追加」ボタンから、メディアライブラリの画像を複数選んで一度に追加可能です。
- 並び替え: 追加した画像はドラッグ＆ドロップで自由に順番を入れ替えられます。
- 削除: 各画像にある「×」ボタンでリストから削除できます。
2. スライダー設定（共通）
すべてのスライダーに適用される表示サイズとアニメーション速度を設定します。
サイズ設定
- 高さ (px): スライダーの高さを指定します。画像は縦横比を維持して表示されます。
アニメーション
- 速度 (秒): 左へ1周流れるのにかかる時間を指定します。数値が大きいほど低速になります。
3. 表示方法（ショートコード）
表示したい箇所に以下のコードを貼り付けてください。
スライダーを表示する：
[DO_slider id="1"]
※idの部分を、表示したいスライダー番号（1〜5）に合わせて変更してください。
💡 運用のポイント
- ドラッグ・スワイプ操作: PCではマウスドラッグ、スマホではスワイプで自由に動かすことが可能です。
- 滑らかな再開: 操作中に止まったアニメーションは、指やマウスを離すと自動的に元のループ速度で再開されます。
- 無限ループ: 画像リストが自動的に複製されるため、継ぎ目のないループ表示が実現します。
- パフォーマンス: GPU加速（will-change）を利用した設計により、多くの画像を並べても滑らかに動作します。
まとめ
画像が数秒毎に切り替わるスライダーもエエけど、
目に優しい、こっちのスライダーの使い方しだいで、
見栄え良いHPにできるで！
今まであったようで、こんな簡単な、軽量な、日本語な流れるスライダーはなかったでしょう！
導入してみてください。
こちらもAIで作ったもの。
時間のある人はページのカスタマイズで迷ったら、AIに相談すれば、かなりの確率で解決出来ちゃいますよ！
問い合わせ
※過去記事の誤報や削除依頼は随時受け付けております。
