Сделайте эту карусель l oop и прыгайте на первый слайд

Question

Есть ли способ сделать эту карусель l oop и перейти к первому слайду

, надеюсь, решением с css, я пытался часами и все еще не могу понять это

Я пытался решить это с css и javascript, но все еще не могу

примечание: код, вероятно, не будет работать здесь, попробуйте сам JSfiddle или код был

любая помощь будет очень признателен

const track = document.querySelector('.advertis__images-container-ul');
    const slides = Array.from(track.children);
    const slideWidth = slides[0].getBoundingClientRect().width;
    slides.forEach((slide, i) => {
      slide.style.left = slideWidth * i + 'px';
    });
    let x = 1;

    const changeSlide = () => {
      setTimeout(() => {
        const currentSlide = track.querySelector('.current-slide');
        const nextSlide = currentSlide.nextElementSibling;

        if (slides.length > x) {
          const amountTomove = nextSlide.style.left;
          track.style.transform = `translateX(-${amountTomove})`;
          currentSlide.classList.remove('current-slide');
          nextSlide.classList.add('current-slide');
          ++x;
        } else {
          track.children[0].classList.add('current-slide');
          track.children[x - 1].classList.remove('current-slide');
          x = 1;
        }
      }, 3000);
    };

    changeSlide();
    setInterval(() => {
      changeSlide();
    }, 3000);

.advertis {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 84.5rem;
  height: 33rem;
  overflow: hidden;


  &__images-container {
    position: relative;


    &-ul {
      transition: all 0.7s;
      position: relative;
      width: 84.6rem;
      height: 31rem;
    }

    &-li {
      list-style: none;
      position: absolute;
      width: 100%;
      margin-left: -1px;
    }

    &-img {
      object-fit: cover;
    }

  }
}

<section class="advertis">
  <div class="advertis__images-container">
    <ul class="advertis__images-container-ul">
      <li #img class="advertis__images-container-li current-slide">
        <img
          src="https://i.ibb.co/c6cD9Sw/alm-app-install-ar.png"
          alt="app advertisment"
          class="advertis__images-container-img"
        />
      </li>
      <li #img class="advertis__images-container-li">
        <img
          src="https://i.ibb.co/N1G5h0x/alm-carousel-centrepoint-ar.png"
          alt="centrepoint"
          class="advertis__images-container-img"
        />
      </li>
      <li #img class="advertis__images-container-li">
        <img
          src="https://i.ibb.co/7Q2LB01/alm-carousel-hm-ar.png"
          alt="advertisment"
          class="advertis__images-container-img"
        />
      </li>
      <li #img class="advertis__images-container-li">
        <img
          src="https://i.ibb.co/597v83c/alm-carousel-noon-ar.png"
          alt="noon"
          class="advertis__images-container-img"
        />
      </li>
    </ul>
  </div>

</section>

Answer 1

Может быть, вы можете посмотреть на Owl Carousel, это удобный плагин, который делает то, что вы просите (зацикливание элементов).

ссылка: https://owlcarousel2.github.io/OwlCarousel2/