---
title: "Deck Carousel — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Davidson Raphael Ani · Carousels. deck carousel/mobile responsive/cms"
canonical: "https://framer.elliotli.dev/component/deck-carousel"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Deck Carousel

# Deck Carousel

deck carousel/mobile responsive/cms

[View on Framer](https://framer.com/marketplace/components/deck-carousel/?via=elliot-li)

![Deck Carousel preview image 1](https://framer.elliotli.dev/og/component/deck-carousel/8a083d133139f4b7/1600x1200.jpg)

## Summary

deck carousel/mobile responsive/cms

## Description

Core Layout & Structure

\- 8 configurable image slots with drag-and-drop CMS compatibility

\- Dynamic aspect ratio control (1:1, 3:4, 4:3, 9:16, 16:9, 2:3, 3:2) per card or globally

\- Fixed-width container system with flex-grow animations eliminates layout jitter during transitions

\- 3D perspective engine with configurable depth, rotation, and vertical arc offset

Visual Design System

\- 3 background type modes: Image fill, solid color, or gradient overlay

\- Per-card button URLs — each slide links independently (up to 3 buttons per card)

\- Hover effects with configurable scale, brightness, lift, and overlay intensity

\- Dual shadow system: Independent active card and side card shadows with gradient support

\- Card borders with adjustable width and color

Animation & Physics

\- Spring-based physics engine with configurable stiffness, damping, and mass

\- Reduced motion support: Automatically detects \`prefers-reduced-motion\` and softens all animations, disables 3D rotation, and removes hover/tap micro-interactions

\- Configurable reduced motion physics for accessibility compliance

Responsive & Mobile-First

\- Breakpoint-aware layout (default 768px) with fully independent mobile property controls

\- Touch swipe gestures with velocity detection and configurable threshold horizontal swipe dominates, vertical scroll remains natural

\- Mobile-optimized defaults:

\- Larger cards with more overlap for peek-through navigation

\- Nav arrows hidden (swipe is primary interaction)

\- Larger dot indicators for touch targets

\- 3D rotation disabled for clarity

\- Subtle blur and dimming on side cards for depth

\- Hover effects disabled (no false triggers on touch)

\-Real-time viewport detection switches instantly on resize/rotation without state loss

Navigation & Interaction

\- Left/right arrow navigation\*\* with customizable icon styling (chevron, arrow, caret)

\- Autoplay with configurable speed and hover pause

\- Tap-to-navigate on any card

CMS & Content

\- Image slot mapping for easy template reuse

\- per-card independent button links (8 slots × 3 buttons)

Accessibility

\- Respects \`prefers-reduced-motion\` system preference

\- Large touch targets on mobile (dots, swipe area)

\- No tap highlight flash on iOS

\- Text selection and image drag disabled on carousel track

## Rank history [How rankings work →](/terms#rankings)

-   All · #5942

## Details

- **Author**: Davidson Raphael Ani
- **Price**: $7.00
- **Published**: 2026-06-05
- **Updated**: 2026-06-05
- **Added**: 2026-05-30
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow