Live Preview: https://smartslider-component.framer.website/
CMSSmartSlider is an intelligent carousel component engineered for high-end creators and brands who need to showcase mixed media flawlessly. Unlike standard sliders that force a fixed timer, CMSSmartSlider detects when a video is playing, waits for it to finish, and then gracefully crossfades to the next slide.
I built this component to give you total editorial freedom. With 12 dedicated slots, you can easily choose between an image, an uploaded video, or an externally hosted video URL for each position allowing you to build pure image galleries, full video reels, or hybrid sequences without touching a single line of code.
Designed to the highest Framer Marketplace standards, it is production-bulletproof, perfectly accessible, and guarantees a high-end experience on every device.
Zero-Flash Transitions: Upgraded to a custom overlap-fade engine for flawless crossfades with absolutely zero black flashes or transparency dips.
Bulletproof Mobile Autoplay: Smart deadlock detection automatically falls back to your high-res poster image if iOS blocks a video, ensuring the slider never freezes.
Global Fallback BG: Added a master background control to handle missing or failed video streams gracefully.
Custom Mask Radius: Instantly apply smooth, hardware-accelerated rounded corners directly from the Framer properties panel.
IIntelligent Auto-Play: The slider automatically pauses its timer to let videos play to completion before transitioning.
Cinematic Fades: Replaces clunky sliding animations with a buttery-smooth, Apple-inspired opacity fade.
Premium Accessibility (a11y): Fully keyboard-navigable. Features native, ARIA-labeled buttons, forced focus outlines, and Space/Enter key handlers so every user gets a flawless experience.
Production & SSR Safe: Engineered from the ground up to bypass Framer's static rendering quirks. Guaranteed zero editor freezing and flawless video autoplay on live sites.
Responsive UI Controls: Stop fighting with fixed elements. Scale your navigation buttons and icon sizes instantly from the properties panel to dial in the perfect proportions for mobile and desktop.
Easy to Customize:
Zero-code setup directly in the Framer properties panel.
Set custom timer durations for image slides and adjust transition speeds.
Easily recolor UI elements to match your brand.
Creative Portfolios & Studio Showreels
High-End Product Launches & Tech Hardware
E-commerce Mixed Media Galleries
Campaign Landing Pages
Sherif Alabi
