---
title: "Diagonal Card Slider — Free Framer component · Best of Framer"
description: "Free Framer component · by Russet Supply · Carousels. 3D Draggable project stack"
canonical: "https://framer.elliotli.dev/component/diagonal-card-slider"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Diagonal Card Slider

# Diagonal Card Slider

3D Draggable project stack

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

![Diagonal Card Slider preview image 1](https://framer.elliotli.dev/og/component/diagonal-card-slider/916e8f2b42687ad3/1600x1200.jpg)

## Summary

3D Draggable project stack

## Description

[Live Preview](https://dragcardslider.framer.website/)

[Grab more free components](https://www.framer.com/@design-by-saqlain/)

Diagonal Drag Card Slider is an interactive project showcase that stacks cards along a diagonal and lets users drag through them in any direction. Cards glide naturally into place with spring-based motion, while the active project name reveals from the bottom-left. Autoplay can also move through the projects automatically.

### Features

-   Diagonal 3D card stack
    
-   Drag in any direction
    
-   Smooth spring-based transitions
    
-   Velocity-based inertia
    
-   Automatic autoplay
    
-   Active project name reveal
    
-   Clickable project cards with custom links
    
-   Adjustable card scaling, tilt, spacing, and rotation
    
-   Responsive Framer property controls
    

### Fully Customizable

Customize the entire stack directly from Framer's right-hand panel, including projects, card dimensions, spacing, 3D motion, spring physics, autoplay, dimming, typography, colors, and more.

### Customize

-   Projects, images, names & links
    
-   Card width, height & radius
    
-   Horizontal & vertical spacing
    
-   3D tilt & rotation
    
-   Scale falloff
    
-   Spring stiffness, damping & mass
    
-   Drag distance
    
-   Autoplay & interval
    
-   Dim color & amount
    
-   Project name typography & color
    

### How It Works

Drag the stack to move through your projects. Your gesture is projected onto the diagonal, and the cards smoothly settle into the next position using spring physics and your drag velocity. The centered card becomes interactive and displays its project name.

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

-   All · #3817

## Details

- **Author**: Russet Supply
- **Published**: 2026-09-06
- **Updated**: 2026-09-06
- **Added**: 2026-09-06
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view