Scroll-Snap Peek Carousel — Free CSS Snap Carousel With Edge Peeking

<section class="pc-intro"><h1>Drag or scroll →</h1><p>Each slide is sized so the next and previous slides peek in at the edges, with the active slide scaling up based on real scroll position within the track.</p></section>
<div class="pc-track" id="pcTrack">
  <div class="pc-slide"><div class="pc-card"><span class="pc-num">01</span><h3>Northwind</h3><p>Brand identity for a climate-tech studio.</p></div></div>
  <div class="pc-slide"><div class="pc-card"><span class="pc-num">02</span><h3>Cadence</h3><p>A scheduling app rebuilt from the ground up.</p></div></div>
  <div class="pc-slide"><div class="pc-card"><span class="pc-num">03</span><h3>Lumen</h3><p>Dashboard design for a solar analytics firm.</p></div></div>
  <div class="pc-slide"><div class="pc-card"><span class="pc-num">04</span><h3>Harbor</h3><p>E-commerce for an independent boatyard.</p></div></div>
  <div class="pc-slide"><div class="pc-card"><span class="pc-num">05</span><h3>Verde</h3><p>Packaging system for a plant-based label.</p></div></div>
  <div class="pc-slide"><div class="pc-card"><span class="pc-num">06</span><h3>Ember</h3><p>Motion design for a live events platform.</p></div></div>
</div>
<div class="pc-dots" id="pcDots"></div>
<section class="pc-outro"><p>Notice neighboring slides never fully disappear — they peek at both edges.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0a0b13;color:#fff}
.pc-intro{min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;padding:24px}
.pc-intro h1{font-size:clamp(30px,6vw,54px);letter-spacing:-.02em}
.pc-intro p{color:#9aa0b8;font-size:16px;max-width:500px}
.pc-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6vh 14vw;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pc-track::-webkit-scrollbar{display:none}
.pc-slide{flex:0 0 72%;max-width:520px;scroll-snap-align:center}
.pc-card{padding:44px 34px;border-radius:26px;background:linear-gradient(155deg,#1a2138,#11131f);border:1px solid #262d44;box-shadow:0 30px 60px rgba(0,0,0,.4);transform:scale(.88);opacity:.55;transition:transform .1s linear,opacity .1s linear;will-change:transform,opacity}
.pc-card.is-active{transform:scale(1);opacity:1}
.pc-num{font-size:13px;font-weight:800;letter-spacing:.14em;color:#7c8cff}
.pc-card h3{font-size:clamp(24px,4vw,34px);letter-spacing:-.01em;margin:10px 0 8px}
.pc-card p{color:#a7adc4;font-size:15px;line-height:1.55}
.pc-dots{display:flex;justify-content:center;gap:8px;padding:8px 0 4px}
.pc-dots span{width:7px;height:7px;border-radius:50%;background:#2a3148;transition:background .3s,transform .3s}
.pc-dots span.is-active{background:#22d3ee;transform:scale(1.4)}
.pc-outro{min-height:50vh;display:flex;justify-content:center;align-items:center;text-align:center;padding:24px}
.pc-outro p{color:#9aa0b8;font-size:16px;max-width:480px}

(function () {
  var track = document.getElementById('pcTrack');
  var slides = Array.prototype.slice.call(document.querySelectorAll('.pc-slide'));
  var cards = slides.map(function (s) { return s.querySelector('.pc-card'); });
  var dotsWrap = document.getElementById('pcDots');

  slides.forEach(function () {
    var dot = document.createElement('span');
    dotsWrap.appendChild(dot);
  });
  var dots = Array.prototype.slice.call(dotsWrap.children);

  var ticking = false;
  function update() {
    ticking = false;
    var trackRect = track.getBoundingClientRect();
    var trackCenter = trackRect.left + trackRect.width / 2;

    var closestIndex = 0;
    var closestDist = Infinity;

    slides.forEach(function (slide, i) {
      var rect = slide.getBoundingClientRect();
      var slideCenter = rect.left + rect.width / 2;
      var dist = Math.abs(slideCenter - trackCenter);
      if (dist < closestDist) {
        closestDist = dist;
        closestIndex = i;
      }
      // Scale and fade every card as a real, continuous function of its
      // own distance from the track's center — not just a binary
      // "active vs inactive" state — so dragging mid-scroll shows
      // intermediate scale values on neighboring cards too.
      var maxDist = rect.width * 0.9;
      var proximity = Math.max(0, 1 - dist / maxDist);
      var scale = 0.86 + proximity * 0.14;
      var opacity = 0.5 + proximity * 0.5;
      cards[i].style.transform = 'scale(' + scale.toFixed(3) + ')';
      cards[i].style.opacity = opacity.toFixed(3);
    });

    dots.forEach(function (dot, i) { dot.classList.toggle('is-active', i === closestIndex); });
  }

  function onScroll() {
    if (!ticking) {
      ticking = true;
      requestAnimationFrame(update);
    }
  }

  track.addEventListener('scroll', onScroll, { passive: true });
  window.addEventListener('resize', onScroll);

  // The track only has overflow-x, so a plain vertical mouse wheel does
  // nothing by default -- only native horizontal gestures (trackpad swipe,
  // shift+wheel) scroll it. Translate vertical wheel input into horizontal
  // scroll whenever it's the dominant axis, so a normal mouse wheel works;
  // leave real horizontal trackpad gestures (deltaX dominant) untouched.
  track.addEventListener('wheel', function (e) {
    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
      e.preventDefault();
      track.scrollLeft += e.deltaY;
    }
  }, { passive: false });

  update();

  dots.forEach(function (dot, i) {
    dot.addEventListener('click', function () {
      slides[i].scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
    });
  });
})();