---
title: "Reveal Slideshow — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Fizi Lee · Carousels. Reveal Slideshow is a modern image slider with a smooth reveal transition that progressively uncovers the next slide."
canonical: "https://framer.elliotli.dev/component/reveal-slideshow"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Reveal Slideshow

# Reveal Slideshow

All Direction Reveal Slider

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

![Reveal Slideshow preview image 1](https://framer.elliotli.dev/og/component/reveal-slideshow/3300e9b08dbc8335/1600x1205.jpg)

## Summary

Reveal Slideshow is a modern image slider with a smooth reveal transition that progressively uncovers the next slide.

## Description

**Reveal Slideshow** is a modern image slider with a smooth reveal transition that progressively uncovers the next slide. It supports both **automatic playback** and **manual control**, making it suitable for hero sections, portfolios, galleries, showcases, and landing pages.

Each slide can include an image, title, and optional link. The component also provides multiple navigation styles, customizable typography, animation timing, reveal direction, and responsive image support.

How to Use

### 1\. Add Slides

Open the **Slides** property and add one or more items.

Each slide supports:

-   **Image** – Main slide image.
    
-   **Name** – Slide title displayed on the slider.
    
-   **Link** _(optional)_ – URL opened when the slide is clicked.
    

### 2\. Choose a Mode

Automatic

Slides advance automatically after the selected duration.

Available settings:

-   **Auto Play** – Play or pause automatic playback.
    
-   **Duration** – Time each slide remains visible before transitioning.
    

Manual

Slides are controlled externally.

Use **Slide Index** to display a specific slide. This is useful when connecting the component to interactions or variables in Framer.

### 3\. Adjust the Reveal Animation

-   **Reveal** – Controls how long the reveal transition takes.
    
-   **Direction** – Select the reveal direction:
    
    -   Left
        
    -   Right
        
    -   Top
        
    -   Bottom
        

### 4\. Customize the Text

Enable **Title Visibility** to show slide titles.

Customize:

-   Text Color
    
-   Sidebar Font
    
-   Title Font
    
-   Text Shadow
    
-   Title Padding
    

### 5\. Choose Navigation

The component offers four navigation styles:

-   **Bar Names** – Displays slide names.
    
-   **Bar Index** – Displays numbered indicators.
    
-   **Arrows** – Previous/Next navigation.
    
-   **None** – Hides navigation.
    

When **Arrows** is selected, you can upload custom Previous and Next icons.

## Tips

-   Add at least **two slides** for the best experience.
    
-   Leave the **Link** field empty if the slide should not be clickable.
    
-   Use high-resolution images with a consistent aspect ratio for the smoothest transitions.
    
-   In **Manual** mode, control the **Slide Index** from your own interactions, variables, or components.
    

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

-   All · #1210

## Details

- **Author**: Fizi Lee
- **Price**: $8.00
- **Published**: 2026-07-25
- **Updated**: 2026-08-06
- **Added**: 2026-07-25
- **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