エスカレーターのような斜めのスライダー？！

はじめに

以下を実現してみました。

https://x.com/dot_weave/status/1961220690729996427

x.com

完成イメージ

感想

以前の記事では、CSSのみで無限ループスライダーを作る方法を紹介しました。

CSSのみで無限ループスライダーを作る方法

「CSSだけで無限ループスライダーを作る方法」を解説。Gutenbergの画像ブロックを使って画像を横並びにし、同じ画像セットを複製して切れ目なくスライドさせる方法や、マウスオーバー時に一時停止する仕組み、1枚ずつ全画面に表示する方法を分かりやすく紹介します。

chuya.s239.xrea.com

スライダー自体を斜めにすること自体は大したことありません。
しかし、そのままだとスライド画像も斜めになってしまうため、工夫が必要です。
ここが学習のポイントでしょう。

また、斜めにする際の調整は意外と面倒でした（笑）。
そのため、CSSの変数やcalc()を用いて計算するようにしています。
WordPress標準ブロックと70行程度のCSSで実現しています。