Box Carousel Nieuw

<!-- Box Carousel · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="bxc"><div class="bxc__scene"><div class="bxc__box">
<div class="bxc__f"><span>Pakket 01</span><b>Starter</b><em>One-page site · € 1.950</em></div>
<div class="bxc__f bxc__f--o"><span>Pakket 02</span><b>Groei</b><em>8 pagina's + SEO · € 4.500</em></div>
<div class="bxc__f bxc__f--k"><span>Pakket 03</span><b>Webshop</b><em>Tot 500 producten · € 7.800</em></div>
<div class="bxc__f bxc__f--w"><span>Pakket 04</span><b>Onderhoud</b><em>Updates, hosting · € 95/mnd</em></div>
</div></div><div class="bxc__nav"><button class="bxc__btn" data-d="-1" aria-label="Vorige">&uarr;</button><span class="bxc__idx">1 / 4</span><button class="bxc__btn" data-d="1" aria-label="Volgende">&darr;</button></div></div>
</div>

/* Box Carousel · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.bxc{position:absolute;inset:0;background:#f4f3f1;overflow:hidden;font-family:'Switzer',system-ui,sans-serif;display:flex;align-items:center;justify-content:center;gap:22px}
.bxc__scene{width:190px;height:116px;perspective:700px}
.bxc__box{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.6,-0.25,.3,1.25)}
.bxc__f{position:absolute;inset:0;border-radius:4px;background:#fff;color:#0a0a0a;padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;backface-visibility:hidden;box-shadow:inset 0 0 0 1px rgba(10,10,10,.1)}
.bxc__f span{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.bxc__f b{font:800 17px/1.1 'Boldonse','Switzer',system-ui,sans-serif;font-synthesis:none}
.bxc__f em{font-style:normal;font-size:12px}
.bxc__f--o{background:#F5480F;color:#fff;box-shadow:none}
.bxc__f--k{background:#0a0a0a;color:#fff;box-shadow:none}
.bxc__f--w{background:#e3dfd8}
.bxc__nav{display:flex;flex-direction:column;align-items:center;gap:8px}
.bxc__btn{width:32px;height:32px;border-radius:50%;border:1px solid #0a0a0a;background:#fff;color:#0a0a0a;font-size:14px;cursor:pointer}
.bxc__btn:hover{background:#0a0a0a;color:#fff}
.bxc__idx{font:500 10px 'JetBrains Mono',monospace;color:rgba(10,10,10,.6)}
@media(prefers-reduced-motion:reduce){.bxc__box{transition:none}}

// Box Carousel · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.bxc')||root;var box=root.querySelector('.bxc__box'),fs=[].slice.call(root.querySelectorAll('.bxc__f')),idx=root.querySelector('.bxc__idx');var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
var h=116,step=0,timer=0;fs.forEach(function(f,i){f.style.transform='rotateX('+(-i*90)+'deg) translateZ('+(h/2)+'px)';});
function go(s){step=s;box.style.transform='translateZ(-'+(h/2)+'px) rotateX('+(step*90)+'deg)';idx.textContent=(((step%4)+4)%4+1)+' / 4';}
function auto(){clearInterval(timer);if(!reduce)timer=setInterval(function(){go(step+1);},2800);}
root.querySelectorAll('.bxc__btn').forEach(function(b){b.addEventListener('click',function(){go(step+ +b.dataset.d);auto();});});
var sy=null;root.addEventListener('pointerdown',function(e){sy=e.clientY;});root.addEventListener('pointerup',function(e){if(sy!==null&&Math.abs(e.clientY-sy)>24){go(step+(e.clientY<sy?1:-1));auto();}sy=null;});
go(0);auto();
}
init(document.querySelector('.jouw-container'));