Swiper Cards Deck — Draggable Stacked Card Carousel

A stack of cards you can throw off the top is a genuinely different interaction from a carousel that slides sideways. It communicates a finite pile rather than an endless track, which is why it suits testimonials, onboarding steps, and anything where the user should feel they are working *through* a set.

Swiper's cards effect does this out of the box, and it does the parts that are tedious to hand-build: pointer, touch, and keyboard input on one code path, momentum and resistance at the ends, and correct behavior when the container resizes.

What the cardsEffect numbers do

The effect is entirely controlled by three values, and they are the difference between a convincing deck and a pile of misaligned rectangles:

cardsEffect: { perSlideOffset: 9, perSlideRotate: 3, rotate: true, slideShadows: true }

- `perSlideOffset: 9` — how far each card behind the top one is pushed, in percent. This is what makes the stack visible. Too low and the deck looks like a single card; too high and the back cards fan out so far the stack reads as a spread hand. - `perSlideRotate: 3` — degrees of rotation added per card down the stack. Three degrees is small on purpose. Real stacked paper is *almost* aligned, and the slight imperfection is what stops the deck looking machine-printed. - `slideShadows: true` — darkens cards further back. This is the one people disable because it looks "dirty" in isolation, and it is doing the most work: without depth shading the cards read as flat overlapping shapes rather than a stack with air between them.

Why loop is off

loop: false is deliberate, not an omission. Swiper implements looping by cloning slides, and in a stacked effect those clones sit inside the same visual pile — so at the wrap point a card can briefly render behind a copy of itself, producing a visible flicker. Sliding carousels hide this because the clone is off-screen; a deck has no off-screen. Finite decks are also the honest interaction here: a pile that never ends undermines the whole metaphor.

That decision is what makes the end states meaningful, which is why sync() disables the arrows using sw.isBeginning and sw.isEnd rather than letting users press dead buttons.

Keeping external UI in sync

The counter and arrow states are driven from Swiper's own events rather than from the click handlers:

on: { slideChange: function () { sync(this); }, init: function () { sync(this); } }

This matters because the deck can advance in three ways — dragging, arrow keys, and the buttons. Updating the counter inside the button handlers would leave it stale after a drag. Hooking slideChange means every input path converges on one update function. Including init in the same object is what sets the initial state, since slideChange does not fire for the starting slide.

Note that this inside a Swiper event handler is the Swiper instance, which is why the handler is a regular function and not an arrow — an arrow function would inherit the outer this and break the pattern.

The overflow rule that catches people

.scd-swiper { overflow: visible } overrides Swiper's own overflow: hidden. A sliding carousel needs clipping so neighbouring slides do not spill out. A card deck needs the opposite: the offset and rotation push back cards slightly outside the container bounds, and clipping shears their corners off. This one declaration is the difference between a clean deck and cards that look cropped along one edge.

keyboard: { enabled: true, onlyInViewport: true } adds arrow-key control, scoped so a deck further down the page does not hijack arrow keys while the user is reading something else.

Height, and why it is fixed

The Swiper container has an explicit height: 400px. Stacked effects position slides absolutely, so the container cannot derive height from its content the way a normal flow element would. Leaving it auto collapses the deck to zero. Cards then use margin-top: auto on the attribution row to push it to the bottom, so slides of different text lengths still align their footers.

Reusing it

Replace the slides with your own content and update nothing else — the counter reads swiper.slides.length at runtime. For a wider sliding gallery, the same library's coverflow effect is a one-word change; compare against a hand-built coverflow carousel or a testimonial slider if you would rather avoid the dependency.