---
title: "Timed Photo Carousel — Free Framer component · Best of Framer"
description: "Free Framer component · by Sirrah Space · Carousels. Engage your visitors with the Timed Photo Carousel, a high-performance Framer component that mimics the popular \"Story\" format found…"
canonical: "https://framer.elliotli.dev/component/timed-photo-carousel"
---

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

# Timed Photo Carousel

Story-style auto-playing image slider.

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

![Timed Photo Carousel preview image 1](https://framer.elliotli.dev/og/component/timed-photo-carousel/e2a2f193c047b95a/1600x1200.jpg)

## Summary

Engage your visitors with the Timed Photo Carousel, a high-performance Framer component that mimics the popular "Story" format found on Instagram and TikTok.

## Description

Engage your visitors with the **Timed Photo Carousel**, a high-performance Framer component that mimics the popular **"Story" format** found on Instagram and TikTok. Unlike standard sliders, this component features a unique **segmented progress bar** that visually indicates the remaining time for each slide using connected dots and bars.

It is built for modern web design, offering complete control over the visual presentation. You can apply **linear gradients** to the progress bars, toggle between top or bottom positioning, and adjust the thickness to fit your brand identity. It handles **responsive images** efficiently and uses optimized animation logic (requestAnimationFrame) to ensure buttery-smooth performance on all devices.

**Functions (Key Features):**

-   **Story-Style Indicator:** Features a segmented progress bar with dots, simulating the viral social media "Story" aesthetic.
    
-   **Gradient Support:** Switch between solid colors or dual-color gradients for the progress indicators.
    
-   **Fully Customizable:** Adjust bar height, thickness, padding, and corner radius to match your UI.
    
-   **Flexible Positioning:** Place the progress indicator at the **Top** or **Bottom** of the image container.
    
-   **Smart Auto-Play:** Smooth automatic transitions with customizable duration per slide.
    

**How to Use:**

1.  **Insert:** Drag the **Timed Photo Carousel** component onto your canvas.
    
2.  **Add Images:** In the properties panel, upload your images or connect them via variables.
    
3.  **Timing:** Set the **Slide Duration** (e.g., 3-5 seconds) for the auto-advance speed.
    
4.  **Styling:** Choose your **Bar Color Mode** (Basic or Gradient). If Gradient, pick two colors to create a unique look.
    
5.  **Positioning:** Use **Bar Position** to place the indicators at the Bottom (default) or Top.
    
6.  **Fine Tune:** Adjust **Bar Thickness** and **Padding** to control how subtle or bold the interface looks.
    

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

-   All · #3694

## Details

- **Author**: Sirrah Space
- **Published**: 2026-02-04
- **Updated**: 2026-04-27
- **Added**: 2026-01-20
- **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