Слайдер-реклама, появляющийся на 10 секунд

<div id="promoModal">
  <div id="closeBtn">×</div>
  <img src="https://tazeje.com/Surat/Banner.jpg" class="active" />
  <img src="https://tazeje.com/Surat/Banner1.jpg" />
  <img src="https://tazeje.com/Surat/Banner2.jpg" />
  <img src="https://tazeje.com/Surat/Banner3.jpg" />
  <div id="promoText">Tazeje.com - Online Shop</div>
</div>

<style>
  #promoModal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) perspective(800px) rotateY(0deg);
  width: 320px;
  height: 180px;
  background: #111;
  border-radius: 15px;
  box-shadow: 0 0 25px #00fff7;
  overflow: hidden;
  z-index: 999999;
  animation: fadeInScale 0.8s forwards;
  }

  @keyframes fadeInScale {
  0% {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7) perspective(800px) rotateY(-15deg);
  }
  100% {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) perspective(800px) rotateY(0deg);
  }
  }

  #promoModal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease;
  }

  #promoModal img.active {
  opacity: 1;
  z-index: 10;
  }

  #promoText {
  position: absolute;
  bottom: 10px;
  left: 15px;
  color: #00fff7;
  font-weight: 700;
  font-size: 1.1rem;
  text-shadow: 0 0 8px #00fff7;
  z-index: 20;
  user-select: none;
  }

  #closeBtn {
  position: absolute;
  top: 8px;
  right: 12px;
  color: #00fff7;
  font-weight: 900;
  font-size: 1.5rem;
  cursor: pointer;
  user-select: none;
  z-index: 30;
  text-shadow: 0 0 6px #00fff7;
  }

  #closeBtn:hover {
  color: #ff4d4d;
  text-shadow: 0 0 10px #ff4d4d;
  }
</style>

<script>
  (function() {
  const modal = document.getElementById('promoModal');
  const images = modal.querySelectorAll('img');
  const closeBtn = document.getElementById('closeBtn');
  let current = 0;
  let intervalId;
  let closed = false; // Ulanyjy modal ýapdymy

  function showModal() {
  if (closed) return; // Ulanyjy ýapdy, täzeden görkezme
  modal.style.display = 'block';
  startCycle();
  // 10 sekunt soň modal gizlet (awtomatik)
  setTimeout(() => {
  if (!closed) hideModal();
  }, 10000);
  }

  function startCycle() {
  intervalId = setInterval(() => {
  images[current].classList.remove('active');
  current = (current + 1) % images.length;
  images[current].classList.add('active');
  }, 2500);
  }

  function stopCycle() {
  clearInterval(intervalId);
  }

  function hideModal() {
  stopCycle();
  modal.style.display = 'none';
  }

  closeBtn.addEventListener('click', () => {
  closed = true;
  hideModal();
  });

  window.addEventListener('load', () => {
  setTimeout(showModal, 1000);
  });
  })();
</script>