ولد الشيخ الغزواني يصل إلى العاصمة الرواندية

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap'); :root { --red: #C62828; --red-light: #e53935; --red-dark: #b71c1c; --radius: 18px; } * { box-sizing: border-box; margin: 0; padding: 0; } .gallery-wrap { width: 100%; max-width: 860px; margin: 0 auto; font-family: 'Tajawal', sans-serif; } .gallery-title { text-align: center; font-size: 22px; font-weight: 900; color: var(--red-dark); margin-bottom: 18px; } .slider-main { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 60px rgba(198,40,40,0.25); background: #000; aspect-ratio: 16/9; } .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; transform: scale(1.03); } .slide.active { opacity: 1; transform: scale(1); z-index: 2; } .slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .counter { position: absolute; top: 14px; left: 14px; background: rgba(183,28,28,0.8); color: white; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 30px; z-index: 10; } .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255,255,255,0.95); border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 18px; color: var(--red-dark); box-shadow: 0 4px 16px rgba(0,0,0,0.2); transition: background 0.2s; display: flex; align-items: center; justify-content: center; } .nav-btn:hover { background: var(--red); color: white; } .nav-prev { right: 14px; } .nav-next { left: 14px; } .thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .thumbs::-webkit-scrollbar { display: none; } .thumb { flex-shrink: 0; width: 80px; height: 58px; border-radius: 10px; overflow: hidden; cursor: pointer; border: 3px solid transparent; transition: all 0.2s; opacity: 0.6; } .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .thumb.active { border-color: var(--red); opacity: 1; transform: translateY(-3px); box-shadow: 0 6px 18px rgba(198,40,40,0.35); } .dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; flex-wrap: wrap; } .dot { width: 8px; height: 8px; border-radius: 50%; background: #b0bec5; cursor: pointer; transition: all 0.2s; } .dot.active { background: var(--red); transform: scale(1.4); } .progress-bar { height: 3px; background: rgba(255,255,255,0.3); position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; } .progress-fill { height: 100%; background: var(--red-light); width: 0%; transition: width linear; } 📸 ولد الغزواني يصل إلى العاصمة الرواندية 1 / 15 › ‹ const slides = document.querySelectorAll('.slide'); const thumbs = document.querySelectorAll('.thumb'); const thumbsContainer = document.getElementById('thumbs'); const dotsContainer = document.getElementById('dots'); const counter = document.getElementById('counter'); const progress = document.getElementById('progress'); let current = 0; let autoTimer; const DELAY = 4000; slides.forEach((_, i) => { const d = document.createElement('div'); d.className = 'dot' + (i === 0 ? ' active' : ''); d.onclick = () => goTo(i); dotsContainer.appendChild(d); }); function goTo(n) { slides[current].classList.remove('active'); thumbs[current].classList.remove('active'); dotsContainer.children[current].classList.remove('active'); current = (n + slides.length) % slides.length; slides[current].classList.add('active'); thumbs[current].classList.add('active'); dotsContainer.children[current].classList.add('active'); counter.textContent = (current + 1) + ' / ' + slides.length; const activeThumb = thumbs[current]; const containerLeft = thumbsContainer.scrollLeft; const containerWidth = thumbsContainer.offsetWidth; const thumbLeft = activeThumb.offsetLeft; const thumbWidth = activeThumb.offsetWidth; if (thumbLeft containerLeft + containerWidth) { thumbsContainer.scrollTo({ left: thumbLeft - containerWidth / 2 + thumbWidth / 2, behavior: 'smooth' }); } resetProgress(); } function changeSlide(dir) { goTo(current + dir); } function resetProgress() { clearTimeout(autoTimer); progress.style.transition = 'none'; progress.style.width = '0%'; setTimeout(() => { progress.style.transition = 'width ' + DELAY + 'ms linear'; progress.style.width = '100%'; }, 50); autoTimer = setTimeout(() => goTo(current + 1), DELAY); } document.addEventListener('keydown', e => { if (e.key === 'ArrowRight') changeSlide(-1); if (e.key === 'ArrowLeft') changeSlide(1); }); let touchStart = 0; document.getElementById('slider').addEventListener('touchstart', e => touchStart = e.touches[0].clientX); document.getElementById('slider').addEventListener('touchend', e => { const diff = touchStart - e.changedTouches[0].clientX; if (Math.abs(diff) > 40) changeSlide(diff > 0 ? 1 : -1); }); resetProgress();