Auto Image Cycle (Slideshow)

<div class="image-cycle-collection">
  <div class="image-cycle-collection__before"></div>
  <div class="image-cycle-collection__list" data-image-cycle="2.5">
    <div class="image-cycle-collection__img" data-image-cycle-item="" class="image-cycle-collection__item">
      <img src="https://cdn.prod.website-files.com/679e2a340ce9c67cecbca3ad/679e2c81170b6a90046718a2_image-1.webp" loading="lazy" alt="">
    </div>
    <div class="image-cycle-collection__img" data-image-cycle-item="" class="image-cycle-collection__item">
      <img src="https://cdn.prod.website-files.com/679e2a340ce9c67cecbca3ad/679e2c80ab2f91466875df0b_image-2.webp" loading="lazy" alt="">
    </div>
    <div class="image-cycle-collection__img" data-image-cycle-item="" class="image-cycle-collection__item">
      <img src="https://cdn.prod.website-files.com/679e2a340ce9c67cecbca3ad/679e2c80f4b142f1a685a2ee_image-3.webp" loading="lazy" alt="">
    </div>
    <div class="image-cycle-collection__img" data-image-cycle-item="" class="image-cycle-collection__item">
      <img src="https://cdn.prod.website-files.com/679e2a340ce9c67cecbca3ad/679e2c801b8a79e8393b622b_image-4.webp" loading="lazy" alt="">
    </div>
    <div class="image-cycle-collection__img" data-image-cycle-item="" class="image-cycle-collection__item">
      <img src="https://cdn.prod.website-files.com/679e2a340ce9c67cecbca3ad/679e2c803f7f3ff9ad22d21b_image-5.webp" loading="lazy" alt="">
    </div>
  </div>
</div>

.image-cycle-collection {
  width: min(95vw, 60em);
  position: relative;
}

.image-cycle-collection__before {
  padding-top: 66.666%;
}

.image-cycle-collection__list {
  z-index: 0;
  border-radius: 2em;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.image-cycle-collection__item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

[data-image-cycle-item="active"] {
  transition: opacity 0.4s ease 0s, visibility 0s ease 0s;
  opacity: 1;
  visibility: visible;
  z-index: 3;
}

[data-image-cycle-item="previous"] {
  transition: opacity 0.4s ease 0.4s, visibility 0s ease 0.4s;
  opacity: 0;
  visibility: visible;
  z-index: 2;
}

[data-image-cycle-item="not-active"] {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

.image-cycle-collection__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

@media screen and (max-width: 767px) {
  .image-cycle-collection__list {
    border-radius: 1em;
  }
}

function initImageCycle() {
  document.querySelectorAll("[data-image-cycle]").forEach(cycleElement => {
    const items = cycleElement.querySelectorAll("[data-image-cycle-item]");
    if (items.length < 2) return;

    let currentIndex = 0;
    let intervalId;

    // Get optional custom duration (in seconds), fallback to 2000ms
    const attrValue = cycleElement.getAttribute("data-image-cycle");
    const duration = attrValue && !isNaN(attrValue) ? parseFloat(attrValue) * 1000 : 2000;
    const isTwoItems = items.length === 2;

    // Initial state
    items.forEach((item, i) => {
      item.setAttribute("data-image-cycle-item", i === 0 ? "active" : "not-active");
    });

    function cycleImages() {
      const prevIndex = currentIndex;
      currentIndex = (currentIndex + 1) % items.length;

      items[prevIndex].setAttribute("data-image-cycle-item", "previous");

      if (!isTwoItems) {
        setTimeout(() => {
          items[prevIndex].setAttribute("data-image-cycle-item", "not-active");
        }, duration);
      }

      items[currentIndex].setAttribute("data-image-cycle-item", "active");
    }

    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting && !intervalId) {
        intervalId = setInterval(cycleImages, duration);
      } else {
        clearInterval(intervalId);
        intervalId = null;
      }
    }, { threshold: 0 });

    observer.observe(cycleElement);
  });
}

// Initialize Image Cycle
document.addEventListener('DOMContentLoaded', function() {
  initImageCycle();
});