创建一个无限的水平滚动画廊

Question

我正在尝试使图像库从左到右无限滚动。 我是用Ruby on Rails编写的，图像来自管理员端，它们正在上传。

因此，循环可与下面的代码配合使用，这意味着一旦最后一张图像离开屏幕，其位置将在-1500处重置为左侧屏幕，但是一旦我开始添加更多图像，则位置需要增加也一样 如何在不每次更改功能位置的情况下使图像离开并进入同一位置的屏幕？ 在此先感谢您，如果我忘记了什么，对不起，这是我第一次在这里发布。

<div class="row">
  <% @posts.each do |post| %>
    <% if post.photo.attached? %>
      <div class="photo-flow ml-2">
        <%= cl_image_tag post.photo.key, class: " box", alt: 'photo'%>
      </div>
    <% end %>
  <% end %>
</div>

const MAX_POSITION = 1500;
const boxes = document.querySelectorAll('.box');
let position = 0;

function animate() {
  position += 2;

  if (Math.abs(position) >= (
    window.innerWidth || document.documentElement.clientWidth
  )) {
    position = -1500;
  } 

  boxes.forEach(box => {
    box.style.transform = `translateX(${position}px)`
  });
}