上のように、コンベア的な動きをするカルーセル（スライドショー、スライダーともいう）の作り方を下記に載せます。
HTMLとCSSのみで作成でき、自動で動きます。それぞれのアイテムにリンクを貼ることもできます。
Chrome、Edge、Firefoxで動作確認済みです。
HTML
構造
xslider_wrap
「xslider_wrap」という名前のdivの上に、「xslider1」と「xslider2」という2つのdivを載せて動かしています。
2つのdivを同時に動かすことにより、すきまなくアイテムが流れているように見せることができます。
個別のアイテムは「xslider1」「xslider2」に載せていきます（これも各々をdivで括ります）。
xslider1
注意点
- 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;
display:flex;
「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でここまでできるのかとビックリ、そして勉強になりました。ありがたい時代になったものですねェ。
関連記事：別のタイプのスライドショー
横スライドショー（jQuery）
こちらはjQueryを使った横スライドショーです。
CSSで作るフェイドイン・アウトタイプのスライドショー
こちらはCSSで作成できます。
関連記事