Как сделать бесконечный горизонтальный скролл в обе стороны?

const container = document.querySelector(".container");
const content = document.querySelector(".content");

// Ширина одного изображения
const imgWidth = document.querySelector(".img-main").offsetWidth;

// Добавляем событие прокрутки
container.addEventListener("scroll", () => {
  // Проверяем, достигли ли мы конца контейнера
  const scrollRight = container.scrollLeft + container.offsetWidth;
  const scrollLeft = container.scrollLeft;
  const contentWidth = content.offsetWidth;

  // Перемещаем последний элемент в начало при скролле влево
  if (scrollLeft <= 0) {
    content.prepend(content.lastElementChild);
    container.scrollLeft += imgWidth;
  }

  // Перемещаем первый элемент в конец при скролле вправо
  if (scrollRight >= contentWidth) {
    content.appendChild(content.firstElementChild);
    container.scrollLeft -= imgWidth;
  }
});

.container {
  width: 100vw;
  /* Занимает всю ширину экрана */
  height: 100vh;
  overflow-x: scroll;
  /* Разрешает горизонтальный скролл */
  white-space: nowrap;
  /* Предотвращает перенос строк */
}

.content {
  display: inline-block;
  /* Для горизонтального выравнивания изображений */
}

.img-main {
  max-width: 100%;
  /* Ограничение ширины изображения для адаптивности */
  width: 60vw;
  height: 100vh;
  display: inline-block;
  margin-right: -0.5rem;
  background-repeat: no-repeat;
  background-size: cover;
}

.i1 {
  background-color: black;
}

.i2 {
  background-color: pink;
}

.i3 {
  background-color: blue;
}

.i4 {
  background-color: green;
}

.i5 {
  background-color: yellow;
}

.i6 {
  background-color: red;
}

.i7 {
  background-color: purple;
}

<div class="container">
  <div class="content">
    <div class="img-main i1"></div>
    <div class="img-main i2"></div>
    <div class="img-main i3"></div>
    <div class="img-main i4"></div>
    <div class="img-main i5"></div>
    <div class="img-main i6"></div>
    <div class="img-main i7"></div>
  </div>
</div>