Wheel-Controlled Carousel — HTML CSS JS Snippet

<div class="whc-wrap" id="whcWrap">
  <div class="whc-track" id="whcTrack">
    <div class="whc-slide" style="background:linear-gradient(160deg,#6366f1,#4338ca)">01</div>
    <div class="whc-slide" style="background:linear-gradient(160deg,#0ea5e9,#0369a1)">02</div>
    <div class="whc-slide" style="background:linear-gradient(160deg,#ec4899,#9d174d)">03</div>
    <div class="whc-slide" style="background:linear-gradient(160deg,#10b981,#047857)">04</div>
    <div class="whc-slide" style="background:linear-gradient(160deg,#f59e0b,#b45309)">05</div>
  </div>
  <p class="whc-hint">Scroll your mouse wheel or trackpad over the cards to move horizontally.</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f6f7f9;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.whc-wrap{width:100%;max-width:520px;overflow:hidden;border-radius:16px}
.whc-track{display:flex;gap:14px}
.whc-slide{flex:0 0 150px;height:190px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;font-weight:800;transition:transform .35s cubic-bezier(.25,.8,.3,1)}
.whc-hint{text-align:center;color:#9ca3af;font-size:12px;margin-top:14px}

var wrap = document.getElementById('whcWrap');
var track = document.getElementById('whcTrack');
var slides = document.querySelectorAll('.whc-slide');
var CARD_W = 150 + 14;
var offset = 0;
var min, max;

function computeBounds() {
  var trackWidth = slides.length * CARD_W - 14;
  var viewportWidth = wrap.getBoundingClientRect().width;
  min = Math.min(0, viewportWidth - trackWidth);
  max = 0;
}

function render() {
  track.style.transform = 'translateX(' + offset + 'px)';
}

// A wheel event's deltaY is what a normal vertical mouse wheel reports; most
// trackpads also report horizontal intent as deltaX during a two-finger
// swipe. Summing both means either gesture moves the carousel, instead of
// only working for whichever axis a given device happens to report.
var wheelTimer = null;
wrap.addEventListener('wheel', function (e) {
  e.preventDefault();
  var delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
  offset = Math.max(min, Math.min(max, offset - delta));
  render();
}, { passive: false });

window.addEventListener('resize', function () {
  computeBounds();
  offset = Math.max(min, Math.min(max, offset));
  render();
});

computeBounds();
render();