Home » Web関連 » 【CSSのみ】カルーセル、横スライドショー【自動で動く】

【CSSのみ】カルーセル、横スライドショー【自動で動く】

time 更新日：2024/08/04　　time 公開日：2021/06/23

上のように、コンベア的な動きをするカルーセル（スライドショー、スライダーともいう）の作り方を下記に載せます。
HTMLとCSSのみで作成でき、自動で動きます。それぞれのアイテムにリンクを貼ることもできます。

Chrome、Edge、Firefoxで動作確認済みです。

注意

画像の遅延読み込みをしていると挙動があやしくなる可能性があります。

1 HTML
2 CSS
3 あとがき
4 関連記事：別のタイプのスライドショー

HTML

構造

xslider_wrap

xslider1

xslider2

「xslider_wrap」という名前のdivの上に、「xslider1」と「xslider2」という2つのdivを載せて動かしています。
2つのdivを同時に動かすことにより、すきまなくアイテムが流れているように見せることができます。
個別のアイテムは「xslider1」「xslider2」に載せていきます（これも各々をdivで括ります）。

xslider1

アイテム1

アイテム2

アイテム3

注意点

1行目に「ontouchstart=””」という記述がありますが、これはスマホでアイテムをタッチした時に、パソコンでマウスホバーした時の動きを適用させるというものです。
「xslider1」と「xslider2」に載せるアイテムの内容は、必ずしも同一でなくとも大丈夫ですが、「xslider1」と「xslider2」の幅を同じにする必要があるので、できれば同一の内容の方が望ましいです。
「xslider1」と「xslider2」、それぞれに載せるアイテム数は、各アイテムの幅にもよりますが、5~7個くらいが最適なようです（「xslider1」が「xslider_wrap」から少しはみ出るくらい）。アイテム数が少なすぎても多すぎても、すきまができたりアイテムが重なったりする可能性があります。
アイテムを増やす時は、
```
<div><a href=""><img src=""></a></div>
```
の数を増やしてください。

CSS

1～7行目

「xslider_wrap」（外枠）のスタイルです。

4行目「width」で横幅、
5行目「background」で背景色、
6行目「box-shadow」で影

の指定をしています。お好みで変更、削除ができます。

9～13行目

「xslider1」と「xslider2」のスタイルです。12行目の「30s」という部分でスライドの速度を変更できます。数字を大きくすると速くなり、小さくすると遅くなります。アイテム数により早く感じたり遅く感じたりすると思いますので、適宜変更してください。

また、その横の「2s」という部分で、スライダーの開始時間を2秒遅らせています（初動を安定させるため）。この数字を大きくすると開始がますます遅くなり、小さくすると少し早まります。
アイテム数が多く、初動が安定しない場合、これをもっと遅らせると安定するかもしれません（その場合、なるべくWebサイトの下部に設置した方がよさそうです）。

余談1：「display:inline-flex;」について

display:inline-flex;

アイテム1

アイテム2

アイテム3

display:flex;

アイテム1

アイテム2

アイテム3

「xslider1」と「xslider2」に「display:inline-flex;」をつけています。
「display:inline-flex;」は、「display:inline-flex;」をつけた要素自体の幅を、その中身の幅にしてくれるようです。
「display:flex;」だとブロック要素になるので、中身が少なくても「width:100%;」になります。

「xslider1」「xslider2」の各幅が「width:100%」より大きければ「flex」でも問題なさそうなのですが、念のため「display:inline-flex;」の方を採用しました。

余談2：「flex: none;」について

このスライダーを作り始めた時に、「xslider1」と「xslider2」が重なる現象が起き悩まされたのですが、それを解決してくれたのが11行目の「flex: none;」です。

15～17行目

「xslider_wrap」をhoverするとスライダーが一時停止します。

19～22行目

アイテムを入れるdivのスタイルです。21行目「padding: 10px;」で各アイテムの間隔を調整できます。数字を大きくすると間隔が広くなり、小さくすると狭くなります。

余談：再度登場の「flex: none;」について

20行目、またしても「flex: none;」が登場します。こちらにも入れておかないと、アイテム画像がとても小さく表示されてしまいます。
画像が小さくなるのを直すだけなら「flex-shrink:0;」でもいいのですが、flexプロパティでいっぺんに指定した方がいいようなので「flex: none;」としました。

24～26行目

アイテムをホバーした時に、5px分上にピョコっと移動します。数字を大きくすると更に上に移動します。
下に下げたい場合は正数にしてください。

28～35行目

要素を動かす記述です。「xslider」という名前をつけて、それを「xslider1」と「xslider2」に適用しています。それぞれが「横軸0（その要素の始まりの位置）から-100％（その要素の幅分左側に動かした位置）まで動く」ということを表しています。

0％の記述はいらないような気もしたのですが、同じような質問を見つけ、念のため入れた方がいいよ、的な回答がついていたので入れることにしました。

あとがき

これを作るまでは、jQueryで作ったスライダーを使っていたのですが、WordPressの読み込みのタイミングのせいなのかなんなのか、たまに表示されない時があって気になっていました。時代的にも「脱jQuery」の流れのようなので、今回CSSのみで動くスライダーに挑戦してみました。
今の時代、CSSでここまでできるのかとビックリ、そして勉強になりました。ありがたい時代になったものですねェ。

追記

Jetpackの「画像の遅延読み込み」を無効にした所、jQueryのスライダーの調子も良くなりました。「画像の遅延読み込み」はスライダーと相性が悪いのかも……？