Coverflow Carousel Nieuw

<!-- Coverflow Carousel · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="cvf" tabindex="0" aria-roledescription="carrousel" aria-label="Projecten"><div class="cvf__track"><div class="cvf__item" data-t="Bakkerij Jansen · Haarlem"><i class="cvf__art cvf__art--1"></i></div><div class="cvf__item" data-t="Fietsenmaker Kuipers · Utrecht"><i class="cvf__art cvf__art--2"></i></div><div class="cvf__item" data-t="Tandartspraktijk Noord · Zwolle"><i class="cvf__art cvf__art--3"></i></div><div class="cvf__item" data-t="Stucadoor Bakker · Breda"><i class="cvf__art cvf__art--4"></i></div><div class="cvf__item" data-t="Hotel De Wadden · Harlingen"><i class="cvf__art cvf__art--5"></i></div><div class="cvf__item" data-t="Advocatenkantoor Visser · Den Haag"><i class="cvf__art cvf__art--6"></i></div><div class="cvf__item" data-t="Kwekerij Groen · Westland"><i class="cvf__art cvf__art--7"></i></div></div><div class="cvf__bar"><button class="cvf__btn" type="button" aria-label="Vorige">&lsaquo;</button><span class="cvf__cap" aria-live="polite"></span><button class="cvf__btn" type="button" aria-label="Volgende">&rsaquo;</button></div></div>
</div>

/* Coverflow Carousel · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.cvf{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-family:'Switzer',system-ui,sans-serif;outline:none;user-select:none;-webkit-user-select:none}
.cvf:focus-visible .cvf__cap{outline:2px solid #F5480F;outline-offset:3px}
.cvf__track{position:relative;width:100%;height:58%;perspective:700px;touch-action:pan-y;cursor:grab}
.cvf__item{position:absolute;left:50%;top:0;height:100%;aspect-ratio:1;border-radius:4px;overflow:hidden;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s;box-shadow:0 12px 26px rgba(10,10,10,.22);cursor:pointer;background:#fff}
.cvf__art{position:absolute;inset:0;display:block}
.cvf__art--1{background:radial-gradient(circle at 30% 70%,#F5480F 0 28%,transparent 28.5%),#f4e3cf}
.cvf__art--2{background:linear-gradient(135deg,transparent 45%,#F5480F 45% 55%,transparent 55%),#0a0a0a}
.cvf__art--3{background:repeating-linear-gradient(0deg,#fff 0 10px,#e8e5e0 10px 20px)}
.cvf__art--3::after{content:'';position:absolute;inset:28%;border-radius:50%;background:#0a0a0a}
.cvf__art--4{background:conic-gradient(from 90deg at 50% 50%,#F5480F 0 25%,#f4f3f1 0 50%,#0a0a0a 0 75%,#d8d2c8 0)}
.cvf__art--5{background:linear-gradient(180deg,#f4f3f1 0 55%,#0a0a0a 55%)}
.cvf__art--5::after{content:'';position:absolute;left:20%;top:22%;width:30%;height:30%;border-radius:50%;background:#F5480F}
.cvf__art--6{background:#1d1c1b}
.cvf__art--6::after{content:'§';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#f4f3f1;font:700 54px/1 'Switzer',system-ui,sans-serif}
.cvf__art--7{background:radial-gradient(ellipse at 50% 120%,#F5480F 0 40%,transparent 41%),repeating-linear-gradient(90deg,#2f3a2c 0 6px,#3d4a39 6px 12px)}
.cvf__bar{display:flex;align-items:center;gap:10px;max-width:92%}
.cvf__btn{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(10,10,10,.18);background:#fff;color:#0a0a0a;font:600 18px/1 'Switzer',system-ui,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 2px}
.cvf__btn:hover{background:#0a0a0a;color:#fff}
.cvf__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.cvf__cap{min-width:0;font-size:12px;font-weight:600;color:#0a0a0a;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(prefers-reduced-motion:reduce){.cvf__item{transition:none}}

// Coverflow Carousel · Bron: SmoothUI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.cvf'); if (!w) return;
    var track = w.querySelector('.cvf__track'), items = [].slice.call(w.querySelectorAll('.cvf__item')), cap = w.querySelector('.cvf__cap'), bt = w.querySelectorAll('.cvf__btn');
    var cur = 3, drag = 0, x0 = 0, down = false, moved = false;
    function layout() {
      var W = track.clientWidth, S = track.clientHeight;
      items.forEach(function (it, i) {
        var d = i - cur + drag, ad = Math.min(Math.abs(d), 2.6), sg = d < 0 ? -1 : 1;
        var x = sg * (Math.min(ad, 1) * W * .2 + Math.max(ad - 1, 0) * W * .085);
        var ry = -sg * Math.min(ad, 1) * 48;
        it.style.width = S + 'px'; it.style.marginLeft = (-S / 2) + 'px';
        it.style.transform = 'translateX(' + x.toFixed(1) + 'px) translateZ(' + (-ad * 70).toFixed(0) + 'px) rotateY(' + ry.toFixed(1) + 'deg)';
        it.style.zIndex = String(100 - Math.round(ad * 10));
        it.style.opacity = ad > 2.2 ? '0' : '1';
        it.setAttribute('aria-hidden', String(i !== cur));
      });
      cap.textContent = items[cur].dataset.t;
    }
    function go(n) { cur = Math.max(0, Math.min(items.length - 1, n)); drag = 0; layout(); }
    bt[0].addEventListener('click', function () { go(cur - 1); }); bt[1].addEventListener('click', function () { go(cur + 1); });
    items.forEach(function (it, i) { it.addEventListener('click', function () { if (!moved) go(i); }); });
    w.addEventListener('keydown', function (e) { if (e.key === 'ArrowLeft') { e.preventDefault(); go(cur - 1); } if (e.key === 'ArrowRight') { e.preventDefault(); go(cur + 1); } });
    track.addEventListener('pointerdown', function (e) { down = true; moved = false; x0 = e.clientX; });
    window.addEventListener('pointermove', function (e) { if (!down) return; var dx = e.clientX - x0; if (Math.abs(dx) > 4) moved = true; drag = Math.max(-1.5, Math.min(1.5, dx / (track.clientWidth * .25))); items.forEach(function (it) { it.style.transition = 'none'; }); layout(); });
    window.addEventListener('pointerup', function () { if (!down) return; down = false; items.forEach(function (it) { it.style.transition = ''; }); go(Math.round(cur - drag)); setTimeout(function () { moved = false; }, 0); });
    if ('ResizeObserver' in window) new ResizeObserver(layout).observe(track);
    layout();
}
init(document.querySelector('.jouw-container'));