Как сделать infinite auto adaptive carousel | html + css + javascript?

Создаю свой сайт и хочу сделать так чтобы под текстом, "каруселились" изображения, не знаю как это на русском, но на английском вот так это называется — infinite auto carousel

Я бы хотел сделать это на чистом js без библиотеки slick-slider, но чтобы я не делал, карусель работает некорректно…

Во первых, прерывается цикл.
Как только карусель доходит до последнего изображения, происходит резкий откат назад к первой картинке или же если я использую функцию clone(), то за нормальными изображениями идут маленькие копии, в общем, некрасиво.

Читал что это можно сделать без js, только на css, но, насколько я понимаю, оно не будет адаптивным ко всем устройствам. Не хочу использовать slick slider так как думаю что повлияет на оптимизацию и скорость сайта ведь для этого необходимо подключать целую библиотеку со стилями к проекту gulp. Вот код js, до которого я дошел:

const slider = document.querySelector('.carousel__slider');
const items = document.querySelectorAll('.carousel__item');

// Duplicate items for infinite scrolling
slider.innerHTML += slider.innerHTML;
items.forEach(item => slider.appendChild(item.cloneNode(true)));

// Reset animation when it reaches the end
slider.addEventListener('animationiteration', () => {
  const firstItem = document.querySelector('.carousel__item:first-child');
  if (firstItem) {
    slider.appendChild(firstItem);
  }
  slider.style.animation = 'none';
  slider.offsetHeight; // Trigger reflow
  slider.style.animation = 'scroll 20s linear infinite';
});

Но он не идеален и есть снова резкий откат