Auto-Playing Carousel

<div class="car" id="car" tabindex="0" aria-label="Carousel">
  <div class="car-track" id="track">
    <div class="car-slide" style="background:linear-gradient(135deg,#ff7a18,#ff477e)"><span>Mountains</span></div>
    <div class="car-slide" style="background:linear-gradient(135deg,#5b6cff,#00d4ff)"><span>Ocean</span></div>
    <div class="car-slide" style="background:linear-gradient(135deg,#16a34a,#a3e635)"><span>Forest</span></div>
    <div class="car-slide" style="background:linear-gradient(135deg,#8b5cf6,#ec4899)"><span>Sunset</span></div>
  </div>
  <button class="car-arrow prev" id="prev" aria-label="Previous"><svg viewBox="0 0 24 24" width="20" height="20"><path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M15 5l-7 7 7 7"/></svg></button>
  <button class="car-arrow next" id="next" aria-label="Next"><svg viewBox="0 0 24 24" width="20" height="20"><path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg></button>
  <div class="car-dots" id="dots"></div>
</div>

*{box-sizing:border-box}
.car{position:relative;width:420px;max-width:100%;height:240px;border-radius:18px;overflow:hidden;box-shadow:0 16px 40px rgba(20,25,50,.18);font-family:system-ui,sans-serif;outline:none}
.car:focus-visible{box-shadow:0 0 0 3px #5b6cff,0 16px 40px rgba(20,25,50,.18)}
.car-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.6,.05,.3,1)}
.car-slide{min-width:100%;display:grid;place-items:center}
.car-slide span{color:#fff;font-size:30px;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.25);letter-spacing:.5px}
.car-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#1a1f36;cursor:pointer;display:grid;place-items:center;transition:.2s;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.car-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.12)}
.car-arrow.prev{left:14px}.car-arrow.next{right:14px}
.car-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.car-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;transition:.25s;padding:0}
.car-dots button.on{background:#fff;width:26px;border-radius:999px}

var track=document.getElementById('track'),slides=track.children,n=slides.length,i=0,timer;
var dots=document.getElementById('dots'),car=document.getElementById('car');
for(var k=0;k<n;k++){(function(k){var b=document.createElement('button');b.setAttribute('aria-label','Go to slide '+(k+1));b.onclick=function(){go(k);play()};dots.appendChild(b)})(k)}
function render(){track.style.transform='translateX(-'+(i*100)+'%)';[].forEach.call(dots.children,function(d,j){d.classList.toggle('on',j===i)})}
function go(x){i=(x+n)%n;render()}
function play(){stop();timer=setInterval(function(){go(i+1)},3000)}
function stop(){clearInterval(timer)}
document.getElementById('next').onclick=function(){go(i+1);play()};
document.getElementById('prev').onclick=function(){go(i-1);play()};
car.onmouseenter=stop;car.onmouseleave=play;
car.addEventListener('keydown',function(e){if(e.key==='ArrowRight'){go(i+1);play()}if(e.key==='ArrowLeft'){go(i-1);play()}});
var sx=0;car.addEventListener('touchstart',function(e){sx=e.touches[0].clientX;stop()},{passive:true});
car.addEventListener('touchend',function(e){var dx=e.changedTouches[0].clientX-sx;if(Math.abs(dx)>40)go(i+(dx<0?1:-1));play()});
render();play();