Auto Testimonial Slider

<div class="ts"><div class="ts-track" id="tsTrack"><blockquote>"This tool completely changed how our team ships."<cite>— Alex, CTO</cite></blockquote><blockquote>"The best developer experience I've had in years."<cite>— Sam, Engineer</cite></blockquote><blockquote>"Setup took five minutes. Five. Minutes."<cite>— Riya, Founder</cite></blockquote></div><div class="ts-dots" id="tsDots"></div></div>

body{background:#f6f7fa}
.ts{width:320px;overflow:hidden;font-family:system-ui,sans-serif}
.ts-track{display:flex;transition:transform .5s cubic-bezier(.5,0,.2,1)}
.ts blockquote{flex:none;width:320px;margin:0;padding:26px;text-align:center;font-size:17px;color:#1a1f36;line-height:1.5}
.ts cite{display:block;margin-top:16px;font-size:14px;color:#8a93ad;font-style:normal;font-weight:600}
.ts-dots{display:flex;gap:8px;justify-content:center;margin-top:8px}
.ts-dots button{width:8px;height:8px;border-radius:50%;border:0;background:#cdd3e0;cursor:pointer;padding:0;transition:.2s}
.ts-dots button.on{background:#ff477e;width:22px;border-radius:999px}

var track=document.getElementById('tsTrack'),dots=document.getElementById('tsDots'),n=track.children.length,i=0;
for(var k=0;k<n;k++){(function(k){var b=document.createElement('button');b.onclick=function(){go(k)};dots.appendChild(b)})(k)}
function go(x){i=x;track.style.transform='translateX(-'+(i*320)+'px)';[].forEach.call(dots.children,function(d,j){d.classList.toggle('on',j===i)})}
go(0);setInterval(function(){go((i+1)%n)},3500);