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

<div id="promoModal"><div id="closeBtn">×</div>
 <img alt="" src="https://tazeje.com/Surat/Banner.jpg" class="active" />
 <img alt="" src="https://tazeje.com/Surat/Banner1.jpg" />
 <img alt="" src="https://tazeje.com/Surat/Banner2.jpg" />
 <img alt="" 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; // Пользователь закрыл модальное окно?

function showModal() {
 if (closed) return; // Пользователь закрыл, не показывать снова
 modal.style.display = 'block';
 startCycle();
 // Скрыть модальное окно через 10 секунд (автоматически)
 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>