бесконечная карусель на js

Question

У меня есть скрипт, который создаёт несколько фотографий в вертикальном контейнере и постоянно их прокручивает вниз, создавая новые сверху. Мне нужно, чтоб было 4 таких блока.

Скрипт их создаёт и пихает в них нужные элементы, однако прокрутка работает лишь в одном блоке.

Как сделать так, чтоб скрипт работал во всех контейнерах?

P.S.: ещё одна проблема, которую очень надо решить - скрипт не удаляет старые блоки, потому страница через какое-то время начинает очень сильно тупить. так же изображения не спускаются плавно, а спустя какое-то время телепортируются.

    let imgcode = '<li class="img"><img class="img" src="https://vtoroe.ru/wp-content/uploads/2021/02/Kopiya-DSC07273-1024x683.jpg"></li><li class="img"><img class="img" src="https://entornet.com/images/articles/lamoda-logo-900x600.jpg"></li><li class="img"><img class="img" src="https://sw.frldev.com/wp-content/uploads/2019/06/sklad-1-1024x683.jpg"></li></ul>'

let columnDiv = document.querySelector('.column');
let childMarginBottom = 10;

function addChild() {
  $(".column").append(imgcode);
}

while (columnDiv.scrollHeight < columnDiv.clientHeight) {
  addChild();
}

setInterval(scroll, 50);

function scroll() {
  if (columnDiv.scrollTop <= 0) {
    addChild();
    columnDiv.scrollTop += columnDiv.firstElementChild.offsetHeight + childMarginBottom;
  }

  columnDiv.scrollTop -= 1;
}

* {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: .4s;
}

.body {
  position: absolute;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

li.img {
  width: 100%;
  display: flex;
  align-items: center;
  overflow-y: visible;
  overflow-x: visible;
  padding-top: 6%;
  padding-bottom: 6%;
  position: relative;
}

img.img {
  width: 90%;
  box-shadow: 0.3vw 0.3vw 0px gray;
  margin: 0 auto;
  opacity: 0.7;
}

li.img:hover img.img {
  cursor: pointer;
  border-radius: 4vw;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

БЛОГ НА HUSL

бесконечная карусель на js

Ответы (0 шт):