---
title: "Carousel Preloader — Free Framer component · Best of Framer"
description: "Free Framer component · by Vishal AN · Loaders. Carousel Preloader turns a set of images into a cinematic intro."
canonical: "https://framer.elliotli.dev/component/carousel-preloader"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Carousel Preloader

# Carousel Preloader

A cinematic image intro that slide

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

![Carousel Preloader preview image 1](https://framer.elliotli.dev/og/component/carousel-preloader/a2e4acf8b6748e3d/1600x1064.jpg)

## Summary

Carousel Preloader turns a set of images into a cinematic intro.

## Description

Carousel Preloader turns a set of images into a cinematic intro. A row of 16:9 images sweeps across the screen on a smooth 3D curved surface, settles on your main image, pauses, then expands it edge-to-edge to open your page.

Bend the row into a convex barrel or concave wrap, or keep it flat — the curve is a genuine 3D arc, seamless and glass-smooth at any strength, not a flat tilt. Choose how the other images exit when the hero expands (flow aside or fade away), and tune the slide, pause, and expand timing for anything from a quick flash to a slow reveal. Point the On Complete event at whatever comes next.

**Features**

-   Full-screen reveal — the main image expands edge-to-edge
    
-   3D curved surface — convex, concave, or flat, with adjustable amount
    
-   Two expand styles — Flow (images push aside) or Fade (dissolve)
    
-   Independent slide, pause, and expand timing
    
-   Pick the hero image and sweep direction; optional loop
    
-   On Complete event to trigger any Framer action
    
-   Responsive, locked 16:9 ratio; static canvas preview, live in production
    
-   Customizable gap, slide width, radius, and background.
    

**How to use**

1.  Drag it onto your page or a full-screen frame at the top of your layout.
    
2.  Add your images in the Images list — swap the placeholder gradients for your own (16:9 works best).
    
3.  Set Main Image to the one that expands.
    
4.  Choose Shape (Convex / Concave / Flat) and adjust Amount.
    
5.  Set Direction and Expand style, then tune Slide, Pause, and Expand times.
    
6.  Optional: point On Complete at a section reveal or next animation.
    
7.  Preview, then publish.
    

Tip: keep Radius at 0 while a curve is active — rounded corners are for the Flat shape.

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

-   All · #2588

## Details

- **Author**: Vishal AN
- **Published**: 2026-08-03
- **Updated**: 2026-08-03
- **Added**: 2026-08-03
- **Categories**: Loaders

## More like this

-   [Preloader Pro V4](/component/preloader-pro-v4) — Interface Studio · $12 — Your Website, Beautifully Unveiled
-   [Circleloader](/component/circleloader) — gustavwf · $5 — Circular logo reveal loader.
-   [AI Text Loading](/component/ai-text-loading) — Syauqizaidan Khairan Khalaf · $5 — Thinking phrases with a shimmer
-   [Preloader Pro V3](/component/preloader-pro-v3) — Interface Studio · $10 — Set the Stage Before the Story