Slider – Image Slider Carousel with Autoplay, Swipe & Thumbnails

71 0 Animations codex Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Slider – Image Slider Carousel with Autoplay, Swipe & Thumbnails

<h1>Image Slider</h1>
<p class="sub">Autoplay carousel with swipe, arrows, dots, thumbnails and keyboard support.</p>
<div class="slider" id="slider">
  <div class="track" id="track">
    <div class="slide" style="--g:linear-gradient(135deg,#ff9a8b,#ff6a88,#ff99ac)"><span>🏔️</span><div class="cap"><h2>Mountains</h2><p>Fresh air and endless views</p></div></div>
    <div class="slide" style="--g:linear-gradient(135deg,#43cea2,#185a9d)"><span>🌊</span><div class="cap"><h2>Ocean</h2><p>Waves, sand and sunsets</p></div></div>
    <div class="slide" style="--g:linear-gradient(135deg,#f7971e,#ffd200)"><span>🏜️</span><div class="cap"><h2>Desert</h2><p>Golden dunes under the stars</p></div></div>
    <div class="slide" style="--g:linear-gradient(135deg,#654ea3,#eaafc8)"><span>🌌</span><div class="cap"><h2>Night Sky</h2><p>Count the shooting stars</p></div></div>
    <div class="slide" style="--g:linear-gradient(135deg,#11998e,#38ef7d)"><span>🌲</span><div class="cap"><h2>Forest</h2><p>Get lost in the green</p></div></div>
  </div>
  <button class="arrow prev" id="prev" aria-label="Previous">‹</button>
  <button class="arrow next" id="next" aria-label="Next">›</button>
  <div class="dots" id="dots"></div>
  <div class="progress"><i id="bar"></i></div>
</div>
<div class="thumbs" id="thumbs"></div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; background: #101225; color: #fff; font-family: "Segoe UI", system-ui, sans-serif; padding: 40px 16px; }
h1 { text-align: center; font-size: 2.6rem; } .sub { text-align: center; opacity: .6; margin: 8px 0 30px; }
.slider { position: relative; max-width: 900px; margin: 0 auto; aspect-ratio: 16/9; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.5); touch-action: pan-y; user-select: none; }
.track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.7,0,.3,1); }
.track.drag { transition: none; }
.slide { flex: 0 0 100%; position: relative; background: var(--g); display: grid; place-items: center; }
.slide span { font-size: clamp(5rem, 18vw, 10rem); filter: drop-shadow(0 10px 20px rgba(0,0,0,.3)); transform: scale(.7); opacity: 0; transition: .7s .2s; }
.slide.on span { transform: none; opacity: 1; }
.cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 30px 40px; background: linear-gradient(transparent, rgba(0,0,0,.6)); transform: translateY(20px); opacity: 0; transition: .6s .35s; }
.slide.on .cap { transform: none; opacity: 1; }
.cap h2 { font-size: clamp(1.4rem, 4vw, 2.2rem); }
.arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.25); backdrop-filter: blur(6px); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; transition: .2s; }
.arrow:hover { background: rgba(255,255,255,.45); }
.prev { left: 14px; } .next { right: 14px; }
.dots { position: absolute; bottom: 14px; right: 24px; display: flex; gap: 8px; }
.dots button { width: 10px; height: 10px; border-radius: 99px; border: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: width .3s; padding: 0; }
.dots button.on { width: 28px; background: #fff; }
.progress { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,.2); }
.progress i { display: block; height: 100%; width: 0; background: #fff; }
.thumbs { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.thumbs button { width: 90px; aspect-ratio: 16/10; border-radius: 10px; border: 3px solid transparent; cursor: pointer; font-size: 1.8rem; opacity: .55; transition: .25s; }
.thumbs button.on { border-color: #fff; opacity: 1; transform: translateY(-3px); }
@media (max-width: 560px) { .thumbs button { width: 56px; font-size: 1.2rem; } .arrow { width: 38px; height: 38px; font-size: 1.5rem; } }

// Image slider / carousel: autoplay with progress, swipe & drag, arrows, dots, thumbnails, keyboard
var track = document.getElementById('track'), slides = track.children, n = slides.length, i = 0;
var dots = document.getElementById('dots'), thumbs = document.getElementById('thumbs'), bar = document.getElementById('bar');
var DELAY = 4500, t0 = performance.now(), paused = false;
for (var k = 0; k < n; k++) (function (k) {
  var d = document.createElement('button'); d.setAttribute('aria-label', 'Slide ' + (k + 1)); d.onclick = function () { go(k); }; dots.appendChild(d);
  var t = document.createElement('button'); t.style.background = slides[k].style.getPropertyValue('--g'); t.textContent = slides[k].querySelector('span').textContent; t.onclick = function () { go(k); }; thumbs.appendChild(t);
})(k);
function go(k) {
  i = (k + n) % n; t0 = performance.now();
  track.style.transform = 'translateX(' + (-i * 100) + '%)';
  for (var j = 0; j < n; j++) { slides[j].classList.toggle('on', j === i); dots.children[j].classList.toggle('on', j === i); thumbs.children[j].classList.toggle('on', j === i); }
}
document.getElementById('prev').onclick = function () { go(i - 1); };
document.getElementById('next').onclick = function () { go(i + 1); };
addEventListener('keydown', function (e) { if (e.key === 'ArrowLeft') go(i - 1); if (e.key === 'ArrowRight') go(i + 1); });
var slider = document.getElementById('slider');
slider.addEventListener('mouseenter', function () { paused = true; });
slider.addEventListener('mouseleave', function () { paused = false; t0 = performance.now(); });
// swipe / drag
var sx = null, dx = 0;
slider.addEventListener('pointerdown', function (e) { if (e.target.closest('button')) return; sx = e.clientX; dx = 0; track.classList.add('drag'); slider.setPointerCapture(e.pointerId); });
slider.addEventListener('pointermove', function (e) { if (sx === null) return; dx = e.clientX - sx; track.style.transform = 'translateX(calc(' + (-i * 100) + '% + ' + dx + 'px))'; });
function end() { if (sx === null) return; track.classList.remove('drag'); var w = slider.offsetWidth; sx = null; if (dx < -w / 6) go(i + 1); else if (dx > w / 6) go(i - 1); else go(i); }
slider.addEventListener('pointerup', end); slider.addEventListener('pointercancel', end);
(function tick(now) {
  if (paused || sx !== null) t0 = now - (parseFloat(bar.style.width) || 0) / 100 * DELAY;
  var p = Math.min(1, (now - t0) / DELAY); bar.style.width = p * 100 + '%';
  if (p >= 1) go(i + 1);
  requestAnimationFrame(tick);
})(performance.now());
go(0);

Comments 0

…

Slider – Image Slider Carousel with Autoplay, Swipe & Thumbnails

Recommended

Comments 0