Создание бесконечной горизонтальной прокрутки галереи - PullRequest
1 голос
/ 17 февраля 2020

Я пытаюсь заставить эту галерею изображений бесконечно прокручиваться слева направо. Я пишу это в Ruby на 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)`
  });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...