캐러셀

<div class="car">
  <div class="track" id="ctrk">
    <div class="slide" style="background:linear-gradient(135deg,#5b5bf7,#8a7bff)" aria-roledescription="slide">봄 컬렉션</div>
    <div class="slide" style="background:linear-gradient(135deg,#f25c8a,#ff9b7a)" aria-roledescription="slide">여름 세일</div>
    <div class="slide" style="background:linear-gradient(135deg,#18c29c,#5be3c9)" aria-roledescription="slide">가을 신상</div>
  </div>
  <button class="carpause" id="cpz" aria-pressed="false">⏸</button>
  <div class="dots" id="cdots"><button aria-current="true"></button><button></button><button></button></div>
</div>

.car{position:relative;width:100%;height:100%;overflow:hidden}
.track{display:flex;width:300%;height:100%;transition:transform .5s ease}
.slide{width:calc(100%/3);display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px}
.carpause{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:#fff;font-size:11px;cursor:pointer}
.dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.dots button{width:6px;height:6px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0}
.dots button[aria-current]{background:#fff;width:16px;border-radius:3px}

const trk = document.getElementById('ctrk'), dots = [...document.querySelectorAll('.dots button')], pz = document.getElementById('cpz');
let i = 0, playing = true;
function go(n) { i = (n + 3) % 3; trk.style.transform = 'translateX(-' + (i * 100 / 3) + '%)'; dots.forEach((d, idx) => idx === i ? d.setAttribute('aria-current', 'true') : d.removeAttribute('aria-current')); }
dots.forEach((d, idx) => d.addEventListener('click', () => go(idx)));
pz.addEventListener('click', () => { playing = !playing; pz.setAttribute('aria-pressed', String(!playing)); pz.textContent = playing ? '⏸' : '▶'; });
setInterval(() => { if (playing) go(i + 1); }, 2400);