Testimonial Carousel

<!-- Testimonial Carousel · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="twc">
  <div class="twc__inner">
    <span class="twc__eyebrow">/ wat klanten zeggen</span>
    <div class="twc__viewport">
      <div class="twc__track">
        <figure class="twc__slide"><blockquote>"Onze nieuwe site staat binnen drie maanden in de top 3. Meer aanvragen dan ooit, en het loopt vanzelf."</blockquote><figcaption><strong>Levi</strong><span>Schade Experts</span></figcaption></figure>
        <figure class="twc__slide"><blockquote>"Eindelijk een bureau dat doet wat het belooft. Snel, eerlijk, en het ziet er fantastisch uit."</blockquote><figcaption><strong>Mo</strong><span>MME Bouw</span></figcaption></figure>
        <figure class="twc__slide"><blockquote>"Ze begrepen onze markt beter dan wij. De cijfers liegen niet, conversie meer dan verdubbeld."</blockquote><figcaption><strong>Dennis</strong><span>Immersive Connect</span></figcaption></figure>
      </div>
    </div>
    <div class="twc__nav"><button class="twc__arrow" data-prev aria-label="Vorige">←</button><div class="twc__dots"></div><button class="twc__arrow" data-next aria-label="Volgende">→</button></div>
  </div>
</section>
</div>

/* Testimonial Carousel · NedDev · eigen werk. */
.twc{overflow:hidden;width:100%;box-sizing:border-box;background:#0a0a0a;color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
.twc__inner{max-width:900px;margin:0 auto;padding:52px 28px;box-sizing:border-box}
.twc__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:#F5480F;display:block;margin-bottom:24px}
.twc__viewport{overflow:hidden}
.twc__track{display:flex;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.twc__slide{flex:0 0 100%;margin:0;padding-right:20px;box-sizing:border-box}
.twc__slide blockquote{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(22px,3.4vw,36px);line-height:1.18;letter-spacing:-.01em;margin:0 0 26px}
.twc__slide figcaption{display:flex;flex-direction:column;gap:2px}
.twc__slide strong{font-family:'Switzer',sans-serif;font-weight:600;font-size:15px}
.twc__slide span{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.06em}
.twc__nav{display:flex;align-items:center;gap:18px;margin-top:30px}
.twc__arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-size:16px;cursor:pointer;transition:.25s}
.twc__arrow:hover{background:#F5480F;border-color:#F5480F;color:#0a0a0a}
.twc__dots{display:flex;gap:8px;margin-right:auto}
.twc__dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);border:0;padding:0;cursor:pointer;transition:.25s}
.twc__dot.is-on{background:#F5480F;width:24px;border-radius:4px}

// Testimonial Carousel · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.twc')||root;
var track=root.querySelector('.twc__track'),slides=track.children.length,i=0,timer=null;
var dotsWrap=root.querySelector('.twc__dots'),dots=[];
for(var k=0;k<slides;k++){var d=document.createElement('button');d.className='twc__dot'+(k?'':' is-on');d.dataset.go=k;dotsWrap.appendChild(d);dots.push(d);}
function go(n){i=(n+slides)%slides;track.style.transform='translateX(-'+(i*100)+'%)';dots.forEach(function(d,x){d.classList.toggle('is-on',x===i);});}
root.querySelector('[data-next]').addEventListener('click',function(){go(i+1);reset();});
root.querySelector('[data-prev]').addEventListener('click',function(){go(i-1);reset();});
dots.forEach(function(d){d.addEventListener('click',function(){go(+d.dataset.go);reset();});});
var startX=null;track.addEventListener('touchstart',function(e){startX=e.touches[0].clientX;},{passive:true});
track.addEventListener('touchend',function(e){if(startX===null)return;var dx=e.changedTouches[0].clientX-startX;if(Math.abs(dx)>40)go(dx<0?i+1:i-1);startX=null;reset();});
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
function reset(){if(timer)clearInterval(timer);if(!reduce)timer=setInterval(function(){go(i+1);},5000);}
reset();
}
init(document.querySelector('.jouw-container'));