Coverflow slider

Native-scroll carousel; slides scale, fade and turn by their distance from center.

Use it for: Anywhere you were about to install Swiper.
Knobs: --sd per slide (written by slider()); --sv-per-view breakpoints; chrome vars --sv-arrow-*/--sv-dot-*

<Slider perView={{ base: 1.2, md: 2.5, xl: 4 }} gap={16} arrows dots
  className="[--sv-arrow-bg:theme(colors.zinc.900/60)]">
  {cards.map(c => (
    <Slide key={c.id} className="[scale:calc(1-min(abs(var(--sd,0))*0.12,0.3))]">
      <Card {...c} />
    </Slide>
  ))}
</Slider>

<div class="sv-slider" id="cards">
  <div class="slide">…</div> ×N
</div>

<script type="module">
  import { slider } from 'scrollvars'
  slider(document.getElementById('cards'))
</script>

/* the coverflow is pure CSS on --sd: */
.slide { scale: calc(1 - min(abs(var(--sd, 0)) * 0.12, 0.3));
  opacity: calc(1 - abs(var(--sd, 0)) * 0.35);
  transform: perspective(900px) rotateY(calc(var(--sd, 0) * -16deg)); }

<Slider perView={{ base: 1.2, md: 2.5, xl: 4 }} gap={16} arrows dots autoplay={5000}>
  {cards.map(c => <Slide key={c.id}><Card {...c} /></Slide>)}
</Slider>
// chrome: --sv-arrow-* / --sv-dot-* vars, prevIcon/nextIcon, renderDot, or your own UI via ref

Engine: npm i scrollvars — full core 3.9 KB gzip. All effects respect prefers-reduced-motion and render complete without JS.