CSSだけで無限ループの画像ギャラリーを作ってみる

今作っているwebサイトで、コンテンツの一つとして無限ループの画像ギャラリーを使いたかったので、作って見ました。
今までこういうものはJSで作るものだと思っていたのですが、以外にCSSだけで出来た。CSSは奥が深い。

DEMO

See the Pen css-infinite-slider by kawamata@元🚒エンジニア (@kawamataryo-the-sans) on CodePen.

ポイント解説

画像の配置とダブリ

違和感なくループするように、6枚の画像をスクロールさせたい場合、1,2,3番目の画像と同様のものを7,8,9番目に配置します。
ダブリの画像を入れることで、切れ目なくループしているように見えます。

    .item-1
      background-image url(https://picsum.photos/400/300?image=101)
    .item-2
      background-image url(https://picsum.photos/400/300?image=102)
    .item-3
      background-image url(https://picsum.photos/400/300?image=103)
    .item-4
      background-image url(https://picsum.photos/400/300?image=104)
    .item-5
      background-image url(https://picsum.photos/400/300?image=106)
    .item-6
      background-image url(https://picsum.photos/400/300?image=107)
    .item-7
      background-image url(https://picsum.photos/400/300?image=101) // item-1と同様
    .item-8
      background-image url(https://picsum.photos/400/300?image=102) // item-2と同様
    .item-9
      background-image url(https://picsum.photos/400/300?image=103) // item-3と同様

参考

ほぼこちらの丸々使わせてもらいました。
https://css-tricks.com/infinite-all-css-scrolling-slideshow/