現状

スライドさせたいリストやCMS要素を複製して横並びに構築して、
カスタムスクリプトCSSのanimationとtranslateXで-50%までスライドさせて実装させている。

問題

なぜか空白が流れ込んできてしまう。
コードを読むと後半の画像が読み込みされてない状態になる。
画像に横幅を指定しない場合は-50%の位置がズレるケースもある。

スクショ撮れないのでイメージをテキストで。伝わってくれ...

[描画済みの画像] [描画済みの画像] [描画済みの画像] [画像なし空白] [画像なし空白]

原因（仮説）

Studioはビューポートに入るタイミングでdataのidを見てimgのsrcを書き換えて描画してる。
setTimeoutしても画像が読み込まれていなかったので恐らく正しい。
もしくは冒頭5項目しか最初は読み込まないみたいな仕様があるかも？不明。
よって横幅を指定しないと50%位置がズレるっぽい。

srcをどうやって書き換えているのか。dataのidを参照してそうだが、srcのpathは不明なので、srcを書き足しておくことはできない。

全部描画されるように最初は縦に並べて見切れないようにするとか？レイアウトシフトや崩れて見えるので避けたい。

カルーセルでやるしかなさげ

参考：https://learned.jp/post/studio-loop#index_dwNBceHL

参考記事にある通り、ビューポートとは関係なく7件しか表示できなかった。
横幅を均一にしないといけないという制約もある。
カクつきが気になる。これはカルーセルをハックするJSを構築しないといけなそうだ。

スライダーと言いながら右端が空白になってから画像を差し替えるDOM変更が走ってる。
空白が一度でてしまうので、カルーセルにmargin-rightに-200pxとかつけておけば気にならなくなった。