5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Te5a,

Description

Progress Slideshow is an interactive, automated carousel that displays a sequence of cards (title, description, and image) alongside a corresponding image section. Cards transition smoothly with fade effects, each featuring an individual progress bar that indicates remaining time before switching. The component is highly customizable, supporting both horizontal and vertical layouts with flexible visual and behavioral options.

Functional Overview

Effortless autoplay with customizable speed and seamless looping
Autoplay toggle with optional pause-on-hover for user control
Flexible content: add as many cards as you want with images, titles, and text
Highlighted active card with smooth focus, while inactive cards fade elegantly
Smooth fade transitions for a premium, polished experience
Flexible image display with cover/contain modes, borders, and rounded corners
Dynamic progress bar animation that stays perfectly in sync
Customize progress bar height, color palette, and spacing for your brand
Multiple layouts: horizontal or vertical, with mirrored card/image positioning
Full control over order: choose whether cards or images come first
Adjustable card ratios and spacing to fit your design vision
Total styling freedom: backgrounds, padding, borders, opacity, and radii
Complete typography control for titles and text (alignment, colors, sizes, weights, spacing, line height)
Optimized for performance with smooth rendering and transitions
Automatic cleanup of animations for stability and reliability
Lightweight static editor mode to keep your workspace fast and responsive

👉 This component is ideal for product features, testimonials, case studies, or any sequential content requiring strong visuals and smooth storytelling.

Support

With this component you get unlimited free support, plus I actually answer emails if you get stuck!  Feel free to reach out if you need more customization or other type of component.

Due to this being a digital product, refunds are not possible.

robin.garaboeuf@gmail.com

Tags

carousel, animation, slideshow image and text, ui effects, minimal, progress bar, customizable.

5a:[["$","$L5d",null,{"post":{"id":"0199cd57-cdee-7b9e-9d3e-4083dbac69c5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"02799a2f-9034-40f1-ad0d-1db0d88f9880","name":"Robin G","slug":"fliks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/667936/avatar-134isGVWzyq2vTqIuVmzoFDz1JyfSl.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"bwOJPFL4n6lQ2eHrnqbR","resolved":true,"title":"Progress Slideshow","body":"$5e","bodyJson":null,"introduction":"","slug":"progress-slideshow","author":{"framerUserId":"02799a2f-9034-40f1-ad0d-1db0d88f9880","name":"Robin G","slug":"fliks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/667936/avatar-134isGVWzyq2vTqIuVmzoFDz1JyfSl.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/bwOJPFL4n6lQ2eHrnqbR/progress-slideshow-TNFO3HRl0LduBSUJlPFk55A7n2hnhy","metadata":{"tint":{"h":192,"s":83,"l":19},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-03T17:22:29.222Z","updatedAt":"2025-10-24T09:23:19.372Z","publishedAt":"2025-10-10T08:58:27.694Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://slideshow-with-progress-indicator.framer.website/","price":"4","paymentUrl":"https://fliks.lemonsqueezy.com/buy/a20b2b7a-de7f-490e-b101-3401a1dea5ba","workshop":true,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"HroVkUp8YKQwMrNmO9zt","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-10T08:58:27.694Z","updatedAt":"2025-10-10T08:58:27.694Z","reported":false}}],"$L5f"]

Suggested for you