This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Copy and paste the CMS Carousel component from my site into your Framer project
Add your CMS collection outside the Canvas
Connect your CMS Collection by clicking the "CMS Collection" property and selecting your Collection List component
Adjust layout settings: set Gap between slides, configure Padding around the carousel, choose Background color, select Overflow behavior (hidden/visible), and pick Alignment (top/center/bottom) for vertical positioning
Configure Arrows: toggle Show on/off, customize Fill color for arrow backgrounds, upload custom Previous and Next arrow images (optional), adjust Size, Radius for roundness, and Inset for positioning from edges
Set up Progress dots: enable Dots toggle, configure Size, Inset from bottom, Gap between dots, Padding around dot container, choose Fill color for dots, set Backdrop color for the dot container, adjust Radius for container roundness, set Opacity for inactive dots, Current opacity for active dot, and Blur amount for backdrop effect
Configure Autoplay: toggle Enable on/off and set Interval duration in seconds (1-30s)
Customize Transition: enable transitions and adjust Duration in milliseconds (100-2000ms)
Add optional Fading effects: enable fading at carousel edges, adjust Width of fade area (%), set Inset positioning (%), and control Opacity of faded areas
Add an Aria Label for accessibility (optional but recommended)
The component connects directly to a Framer CMS Collection List and automatically converts it into a carousel. Once connected, it handles all the cycling logic internally—you just control the visual appearance and behavior. You can customize navigation arrows (size, style, position), progress dots (appearance, positioning, backdrop blur), autoplay timing, transition speed and smoothness, fade effects on edges, vertical alignment of items, and spacing between slides. The component adapts to your CMS item count and handles all the interaction states automatically.
When you purchase this component, you'll receive:
The Component Itself - Full access to the component all future updates
Remix File with Component Setup - A complete Remix file with the component pre-configured and ready to integrate into your project.
Setup Instructions - Clear, step-by-step instructions to help you implement the component quickly and correctly.
Dedicated Support - Direct access to our team for assistance if you encounter any issues during setup or implementation.
For any queries and help setting up the component, contact hello@segmentui.com
If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.
Nabeel
