Related Snippets

57 in Mobile Screens category
2–7 of 57
Swiper Card Stack with Save and Skip Buttons

Swiper Card Stack with Save and Skip Buttons

Mobile Split Bill Screen

Mobile Split Bill Screen

Mobile Referral & Invite Friends Screen

Mobile Referral & Invite Friends Screen

Mobile Settings Screen with Live Search

Mobile Settings Screen with Live Search

Mobile Delivery Order Tracking Screen

Mobile Delivery Order Tracking Screen

Mobile Workout In-Progress Screen

Mobile Workout In-Progress Screen

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

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

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.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Ask an AI assistant like Claude to add SAVE and NOPE stamps that fade in as you drag, an undo button for the last card, or load the deck from an API.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a swipeable card stack with Swiper 11 loaded from a CDN (bundle script and CSS).

Requirements:
- Use effect 'cards' with cardsEffect { perSlideOffset: 9, perSlideRotate: 3, rotate: true, slideShadows: true }, grabCursor and keyboard, and give the container a fixed 240x320 size with overflow visible.
- Render six recipe cards from an array using gradients and emoji.
- Add Save and Skip buttons that update a tally and call slideNext(); swiping just browses the deck.
- After the last card, hide the stack and show a completion panel with a Start over button that resets counters and calls slideTo(0, 0).

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

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>

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, products or profiles quickly. For a 3D alternative see the coverflow carousel.
SHOP
Product triage and wishlists
Save or skip items in a fast, engaging flow.
Flashcards and quizzes
Move through study cards with a swipe.
Learning gesture alternatives
Shows pairing a swipe gesture with equivalent buttons and keys.

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.