webdevpuneet.com

Related Snippets

57 in Mobile Screens category
3–8 of 57

Swiper Card Stack with Save and Skip Buttons

Vertical Story-Style Slider

Mobile Keyboard Guide — Correct inputmode/type/pattern Per Field

Swipe-to-Reveal List Item Actions (Archive / Delete)

Sticky Footer CTA Bar with Safe-Area Insets

Alphabet Jump Index — Contacts-Style A–Z Scroll Navigation

Swiper Card Stack with Save and Skip — Free JS Snippet

Swiper Card Stack with Save and Skip Buttons · Mobile · Plain HTML, CSS & JS · Live preview

CategoryMobile Screens
TagsTouch GesturesAccessibilityMobile UICSS GridJS Libraries

Copy & paste

Source Code

Requires
CSS · swiper-bundle.min.cssJS · swiper-bundle.min.js
<div class="cs-wrap">
  <div class="cs-head"><h3>Weekend recipes</h3><span class="cs-score" aria-live="polite">Saved <b id="csSaved">0</b> &middot; Skipped <b id="csSkipped">0</b></span></div>
  <div class="swiper cs-swiper" id="csSwiper">
    <div class="swiper-wrapper" id="csSlides"></div>
  </div>
  <div class="cs-done" id="csDone" hidden>You&rsquo;ve seen every recipe. <button type="button" id="csAgain">Start over</button></div>
  <div class="cs-actions" id="csActions">
    <button type="button" class="cs-skip" id="csSkip" aria-label="Skip this recipe">&#10005;</button>
    <button type="button" class="cs-save" id="csSave" aria-label="Save this recipe">&#9829;</button>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Swiper cards effect with tunable per-slide offset and rotation
Save and Skip buttons as a non-gesture alternative to swiping
Running tally of saved and skipped cards
Swiping browses the deck while the buttons record decisions
Keyboard arrow-key control
End-of-stack panel with an instant reset via slideTo(0, 0)
Explicit container size and overflow visible for the fanned cards
Gradient and emoji artwork with no image files

About this UI Snippet

Swiper Card Stack with Save and Skip Buttons — HTML, CSS & JavaScript

Screenshot of the Swiper Card Stack with Save and Skip Buttons snippet rendered live

The card stack — a pile of cards you flick away one at a time — became a mobile design idiom because it turns a list into decisions. Each card asks one question, save or skip, and the physical gesture is faster and more engaging than tapping buttons on a list. Swiper includes it as the cards effect, so the stacking, rotation and depth shading do not need custom transforms.

effect: 'cards' changes how slides are arranged: instead of sitting side by side, they pile up, each one rotated slightly and offset so the edges of the cards beneath peek out. The cardsEffect object tunes it. perSlideOffset sets how many pixels each buried card shows, perSlideRotate sets the rotation per layer, rotate toggles the tilt while dragging, and slideShadows adds shading that makes the stack look three-dimensional. Sizing matters more than usual with this effect: the swiper container must have an explicit width and height, because the cards are absolutely positioned within it, and overflow needs to be visible for the fanned cards to show beyond the top card's edge.

What turns the visual into a tool is the interaction layer. The Save and Skip buttons call slideNext() and update the tally, giving the same result as swiping for people using a mouse or keyboard — and providing a non-gesture alternative, which accessibility guidance expects for any swipe interaction. Keyboard support is enabled so the arrow keys advance the stack. At the final card the snippet does not just stop; it swaps the stack for a "You've seen every recipe" panel with a Start over button that resets the counters and calls slideTo(0, 0), the second argument setting a zero-duration jump.

Deciding what a swipe means is the design question worth thinking about. In Swiper's cards effect, dragging a card away moves through the deck in the normal slider direction — drag left for the next card, right to go back — so swiping is browsing, not choosing. That is why the decision lives on the two buttons: Save and Skip each record a choice and then advance. Some apps map swipe direction to like and dislike, which requires a custom gesture layer that reads the drag direction and animates the card off screen itself; it is a bigger build than the cards effect alone, and it is worth deciding early whether you need it. The cards use gradients and emoji, so the demo needs no images.

Step by step

How to Use

  1. 1
    Drag the top cardDrag it to the left and release. It flies away and reveals the next card in the stack; drag right to bring one back.
  2. 2
    Use the buttonsPress the heart to save or the cross to skip. The tally at the top updates either way.
  3. 3
    Look at the stackCards beneath the top one peek out with a slight rotation, showing that more are waiting.
  4. 4
    Use the keyboardPress the left and right arrow keys to move through the deck.
  5. 5
    Reach the endAfter the last card, a completion panel appears with a Start over button.

Real-world uses

Common Use Cases

🃏
Discovery and matching apps
Let users triage recipes, profiles or places by flicking cards away, with Save and Skip buttons recording each decision.
🛍️
Product triage and wishlists
Save or skip items quickly, where a running tally shows how many were kept and how many were passed over.
📚
Flashcards and quizzes
Move through study cards with the same stack, using keyboard control and an end-of-stack state when the deck is empty.
♿
Gesture alternatives
Pair a swipe with visible buttons so people who cannot or prefer not to gesture still complete every decision.
🎠
Carousel variations
Compare with the 3D coverflow product carousel, which uses the same library for a browsing rather than deciding layout.

Got questions?

Frequently Asked Questions

Set effect: "cards", give the container an explicit width and height, and tune cardsEffect (perSlideOffset, perSlideRotate, rotate, slideShadows).

Not with the cards effect alone. Dragging moves through the deck in the normal slider direction, so record decisions with buttons, or build a custom gesture layer that reads the drag direction and animates the card away.

Yes. Gestures are not available to everyone, so provide buttons and keyboard controls that do the same thing.

Call swiper.slideTo(0, 0) to jump to the first card immediately and reset your own counters.

The cards effect needs overflow to be visible on the container, and the container must have a fixed size.

It is best used without loop, because the deck should end. Handle the final card with your own completion state.

Yes. Use the JSX, Vue, Angular or Tailwind export buttons on this page to convert the markup and styles. The behaviour comes from Swiper, so in a framework project install it with npm install swiper (its React and Vue components take the same options) instead of the CDN tag, use the Swiper and SwiperSlide components, or create it in useEffect / onMounted / ngAfterViewInit, and release it with destroy() when the component unmounts.