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:T81b,

Overview

Elevate your site's visual appeal with Modern Carousel Slider. This component is designed to be clean, responsive, and incredibly easy to set up. Whether you need a hero slider, a photography showcase, or a product gallery, this component fits seamlessly into any design system.

It features a unique layout with bottom navigation buttons that align perfectly with the image container, creating a structured and modern look.

✨ Key Features

* 📷 Canvas Preview: What you see is what you get. The first uploaded image displays directly on the canvas, making layout adjustments a breeze.

* ⚡️ Auto-Play Support: Toggle auto-play on or off and customize the interval speed to suit your content.

* 🎨 Fully Customizable: Change button colors, background colors, and typography to match your brand identity.

* 📏 Precision Control: Adjust font sizes, icon sizes, and corner radius to pixel-perfect standards.

* 🚀 Smooth Transitions: High-performance cross-fade animations powered by Framer Motion.

* 🎛️ Powerful Controls

We've exposed all the necessary properties so you can tweak the design without touching a single line of code.

Modern Carousel Properties

How to use

1. Drag the component onto your canvas.

2. Connect your images via the property panel.

3. Adjust the Corner Radius to match your site's style (Default: 10px).

4. Customize the Button Colors and Labels (e.g., "PREV / NEXT").

5. Publish!

---

Updates:

v1.0.0 - Initial release with responsive controls and canvas preview.

5a:[["$","$L5d",null,{"post":{"id":"019bca01-2b9d-7289-903a-02dbc120e13e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6599bd2e-ed34-4191-932d-6c2a19338570","name":"Rain Ruan","slug":"rain-ruan","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"B5jABE03Xer4mbHJxOGd","resolved":true,"title":"Modern Carousel","body":"$5e","bodyJson":null,"introduction":"Smooth auto-play image slider","slug":"modern-carousel","author":{"framerUserId":"6599bd2e-ed34-4191-932d-6c2a19338570","name":"Rain Ruan","slug":"rain-ruan","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/B5jABE03Xer4mbHJxOGd/modern-carousel-kSUrXZLE3KV21o10Vi78Wwf8l6s20h","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-02T04:20:11.623Z","updatedAt":"2026-02-08T05:06:40.422Z","publishedAt":"2026-01-17T03:30:32.989Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/ModernCarousel-Yr7Z.js@q12QXh315p2URVMY1Xk1","previewUrl":"https://modern-carousel-slider.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"q12QXh315p2URVMY1Xk1","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":26,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-17T03:30:32.989Z","updatedAt":"2026-01-17T03:30:32.989Z","reported":false}}],"$L5f"]

Suggested for you