Hero | Slider Codepen

<script> (function() // ---------- DOM elements ---------- const track = document.getElementById('slidesTrack'); const slides = Array.from(document.querySelectorAll('.slide')); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const dotsContainer = document.getElementById('dotsContainer'); const progressFill = document.getElementById('progressFill');

body font-family: 'Inter', sans-serif; background: #0a0c10; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;

// ---------- helper: update slider position & active states ---------- function updateSlider(instant = false) if (isTransitioning && !instant) return; if (instant) track.style.transition = 'none'; else track.style.transition = 'transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)'; const offset = -currentIndex * 100; track.style.transform = `translateX($offset%)`; // update active dot const dots = document.querySelectorAll('.dot'); dots.forEach((dot, idx) => if (idx === currentIndex) dot.classList.add('active'); else dot.classList.remove('active'); ); // small callback after transition ends if needed if (instant) // force reflow then restore transition setTimeout(() => track.style.transition = ''; , 20); hero slider codepen

<!-- navigation arrows --> <div class="slider-arrow arrow-left" id="prevBtn" aria-label="Previous slide"> <i class="fas fa-chevron-left"></i> </div> <div class="slider-arrow arrow-right" id="nextBtn" aria-label="Next slide"> <i class="fas fa-chevron-right"></i> </div>

/* progress bar (optional style) */ .progress-bar-container position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(255,255,255,0.2); z-index: 20; const prevBtn = document.getElementById('prevBtn')

.arrow-right right: 1.5rem;

// clear both auto timers and progress timer function stopAutoRotation() if (autoInterval) clearInterval(autoInterval); autoInterval = null; if (progressInterval) clearInterval(progressInterval); progressInterval = null; const nextBtn = document.getElementById('nextBtn')

/* slides track */ .slides-track display: flex; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform;

/* each slide */ .slide flex: 0 0 100%; position: relative; min-height: 550px; height: 70vh; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: flex-start; transition: transform 0.3s;