---
title: "DiagonalXCarousel — Free Framer component · Best of Framer"
description: "Free Framer component · by Nakul · Carousels. Getting started guide: Insert the component & add your images Drag DiagonalXCarousel onto your canvas."
canonical: "https://framer.elliotli.dev/component/diagonalxcarousel"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/DiagonalXCarousel

# DiagonalXCarousel

Cinematic 'X' motion for elite interface

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

![DiagonalXCarousel preview image 1](https://framer.elliotli.dev/og/component/diagonalxcarousel/a4699e3bbd7f8ee1/1600x1200.jpg)

## Summary

Getting started guide: Insert the component & add your images Drag DiagonalXCarousel onto your canvas.

## Description

## Feature breakdown:

-   Two diagonal strips. One unforgettable X. Unlike any horizontal carousel, your images command the full canvas from corner to corner. creating depth and tension that stops scrolling cold.
    
-   Dial in the exact angle you want. The X Angle property lets you go subtle (15°) or dramatic (45°). both strips mirror each other automatically, so one slider does all the work.
    
-   Set up in minutes, not hours. Drop in your images via Strip 1 and Strip 2, hit preview, and you're done. Every detail — speed, spacing, corners, borde. lives in the properties panel.
    
-   Dark luxury, built in. Ships with a pure black background and a white image border that makes every visual feel like a gallery exhibition. Override both with a single color pick.
    
-   Vignette that frames like cinema. The built-in vignette fades the edges of the layout, drawing the eye to the center crossing point. like a spotlight on your best work.
    
-   Pixel-perfect at every size. Responsive scaling means the X geometry recalculates across breakpoints. what looks cinematic on desktop remains intentional on mobile.
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-xl56252t-3QnwDNfDjTfVzLH479dtUVaBLLrI6i)

## Getting started guide:

-   **Insert the component & add your images**
    
    Drag DiagonalXCarousel onto your canvas. In the properties panel you'll see Strip 1 Images and Strip 2 Images. each accepts a list of items (default 4 each). Click the bracket icon to add, reorder, or replace images in each strip. Strip 1 runs the upper-left diagonal; Strip 2 runs the lower-left diagonal.
    
-   **Set the animation speed**
    
    Speed (s) controls how many seconds it takes for one full loop cycle. Lower values = faster movement. The default is 28s — a slow, premium drift. Reduce to 14–18s for energy; increase to 40–60s for a near-still, gallery feel.
    
-   **Dial in the X angle**
    
    X Angle is the most important visual property. it defines how steeply the two strips cross each other. Both strips mirror automatically from this single value.
    
-   **Size your image cards**
    
    Image Width and Image Height control every card in both strips simultaneously. Wider, taller cards feel editorial and cinematic. Smaller cards feel like a dense film-strip.
    
-   **Customize colors & borders**
    
    The component ships dark-first. pure black background with a white image border. Override either to match your brand.
    
-   **Enable the vignette**
    
    The vignette fades the outer edges of the component to your background color. drawing the eye inward to the X crossing point. Toggle it on/off and control the intensity with Vignette %.
    
-   **Preview & publish**
    
    The animation only runs in Preview mode (Cmd/Ctrl + P) or on the published site. the Framer canvas shows a static snapshot. Hit Preview to validate your angle, speed, and vignette before publishing.
    

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

-   All · #4203

## Details

- **Author**: Nakul
- **Published**: 2026-05-15
- **Updated**: 2026-05-13
- **Added**: 2026-05-01
- **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