更新するたびにバナーや画像をランダム表示する方法

みなさま、こんにちは。

突然ですが、私はカルーセル（スライダー）があまり好きではありません（本当に突然ですが……）。

カルーセルがとても人気なことは知っています。
制作の依頼がくるときも「画像くるくる回る」を導入してほしいといわれることもたびたび。

確かにカルーセルがあるだけでそれっぽいサイトが作れますよね。

そういった意味では非常に使い勝手のいいカルーセルですが、

• ユーザーの意に反して動く
• 順番的に後ろの方に置かれた画像は日の目を見ない

そして上記内容と重なるのですが、
カルーセルのクリック率はサイト訪問者の1%と言われ、そのうち84%が最初の画像をクリックしているとのデータもあります。

実際web業界でもカルーセルのデメリットは言われ続け、カルーセルについて否定的な記事が溢れています。

「でも複数のコンテンツを紹介したい」
そんな時はランダム表示を検討してみてください。

更新するたびに画像がランダム表示！

まず参考までに下記サイトをご覧いただき、何回か更新をしてみてください。

PROGBLOG

ヘッダー画像がランダムに表示されることが確認できますでしょうか。

表示コンテンツに優先順位がつけられない点ではカルーセルに劣りますが、回遊しているお客様へ、平等に、コンテンツをストレスなく見せれますので、ぜひ実装してみてください。

画像ランダム表示の実装方法

まずはソースを書きますので、「もう時間がないっ！」という人はこちらをコピペしてみてください。

HTMLの「js-random」というクラスを付与したブロックの中に表示されますよ。

それでは詳細を解説していきますので、仕組みが知りたい方は読んでみてください。

表示させたいソースを定義する

まずは表示させたいソースを定義してください。
ランダム表示ですので、とうぜん複数個になるかと思います。

ランダムで表示されるソースを定義する

次に、ランダム表示されるソースを定義してください。
ここがランダム表示の肝になりますので、解説していきますね。

上記ソースを解剖していくと、

Mathオブジェクトのfloor()メソッドは、小数点以下を切り捨てるという意味で、「Math」オブジェクトの「random()」メソッドはランダム値を生成するために使います。
そして「.length」プロパティで、配列の中の要素数を取得しました。

それを踏まえて先のソースを日本語に翻訳すると、
「sorceList の数を取得し、ランダムで返す。その際、少数点以下は切り捨てる」
となりました。

「js-random」クラス内に表示する

ここまでくれば後は表示するだけですので、

「js-random」内にsorceList で定義したソースの[random]番目を表示するとなります。

完成版はこれ

See the Pen
OJVmjmg by sank (@sank_f)
on CodePen.

最後に完成版を置いておきますので、ご確認ください。
最もわかりにくそうなランダム値をコンソールで書き出しましたので、デベロッパーツールを活用しつつ確認してみてください。

確認できましたでしょうか？
コンソールで０が出てるときは、青。
コンソールで１が出てるときは、赤。
コンソールで２が出てるときは、緑になります。

ココナラでwebに関する質問に回答するサービスを出品しておりますので、もしよろしければ覗いてみてください。

HTML、CSS、SCSS、jQueryを教えます 調べてみたけれどわからないコーディング、ご相談ください。