5e:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/415hvdruki4ud.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1ktf0sm5sxqup.js","/creators-assets/_next/static/immutable/chunks/1dzfckym0nghc.js","/creators-assets/_next/static/immutable/chunks/1vr_3-vdcf0mn.js","/creators-assets/_next/static/immutable/chunks/1cuuzi60s_xh3.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1gop2naj8q_bx.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/2k_aekaeyljm2.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0mxxs4-__ynew.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/43klns5g0wl80.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3q5d1avmchlp0.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/149w-u4or12up.js","/creators-assets/_next/static/immutable/chunks/1kws7r6etoq5-.js","/creators-assets/_next/static/immutable/chunks/13mks9ztnefhj.js","/creators-assets/_next/static/immutable/chunks/17pioewhhzr_j.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2p4sqhvmasp9s.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/3lqyfto2688hr.js","/creators-assets/_next/static/immutable/chunks/3fr1ev83fgwky.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/3um5ae_udgvki.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2zlizmh1083ez.js"],"PostDetailCard"] 5f:Tb6c,

Tutorial

Tutorial for Stories Slideshow

Details

Stories Slideshow is the ultimate media display component for Framer. Drag and drop your galleries of images and videos and showcase your media with an Instagram/Snapchat Stories-like style. Customize the share icon to share links that auto-copy to the clipboard when clicked. Designed with mobile in mind, Stories Slideshow brings effortless trust and interactivity to your website. Customize every part of the component and toggle visibility of every element for a unique, delightful user experience.

Features

Hover to pause, click to progress through slides
Upload images and videos directly
Audio support for videos
Customize story duration by milliseconds (ms)
Customize username, avatar and time elapsed
Customize share icon with link to auto-copy to clipboard
Enable/Disable Heart Animation
Toggle visibility of every element - user info, time elapsed, progress bars, message and every icon
Mobile optimized - Users tap the middle to pause and tap left or right to progress on mobile devices

Customizations

Customize text, font & color username
Customize text, font & color of time elapsed
Customize message and design with the two message modes: Glass & Transparent
Customize link for share icon that copies to clipboard when clicked
Enable/Disable animated user info intro

Custom Transition Animations

Smooth Blend (Default)
Slide
Zoom
3D Flip
No animation (Disables transition animation)

Toggle Visibility (All elements)

Show/Hide Progress Bars
Show/Hide Username
Show/Hide Time Duration
Toggle arrow visibility
Customize border radius
Enable/Disable hovering ability
Show/Hide ellipsis (menu)
Show/Hide customizable message
Show/Hide heart
Show/Hide share icon

Great for:

Creative portfolios
Social media management agencies
Influencer agency websites
eCommerce websites

5b:[["$","$L5e",null,{"post":{"id":"01989e96-8020-7648-8e7d-b07f42dc0345","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7d10eb1d-731b-48d4-846c-ebb2274ac644","name":"Netbloom","slug":"netbloom","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/31476/p9WbJQQvm-0BJOmC9RzfkIULrudhkRCdg0HslxiM","followed":false,"followsYou":false},"media":[],"resources":[{"id":"OjNrok07cv7DWazytvRA","resolved":true,"title":"Stories Slideshow","body":"$5f","bodyJson":null,"introduction":"Showcase images and videos as stories","slug":"stories","author":{"framerUserId":"7d10eb1d-731b-48d4-846c-ebb2274ac644","name":"Netbloom","slug":"netbloom","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/31476/p9WbJQQvm-0BJOmC9RzfkIULrudhkRCdg0HslxiM","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/OjNrok07cv7DWazytvRA/stories-DcR3mXHSxBgMHhGUJZO06FOnOZlQTX","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-06T10:36:33.058Z","updatedAt":"2026-03-18T04:32:44.103Z","publishedAt":"2025-08-12T14:02:00.096Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://stories-component.framer.website/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_31Jo98ct0zoMrxvSZWQB5Nje0mOM5pelU69Gh2ijyQg?utm_source=framer&utm_medium=marketplace&utm_campaign=stories","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"5ljP9c5e4kkeNePGb777","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-08-12T14:02:00.096Z","updatedAt":"2025-08-12T14:02:00.096Z","reported":false}}],"$L60"]

Suggested for you