CMSGallerySlider
CMS Gallery Slider – A versatile gallery slider with CMS integration, thumbnail navigation, and smooth animations. Perfect for product pages, portfolios, and image showcases.
Make it with Workshop
Build your own component with AI
CMS Gallery Slider – A versatile gallery slider with CMS integration, thumbnail navigation, and smooth animations. Perfect for product pages, portfolios, and image showcases.
Make it with Workshop
Build your own component with AI
Demo blog: My Framer Site
Normal : https://extended-founders-035096.framer.app/
Versatile Gallery Slider for Framer
A flexible gallery slider component that seamlessly integrates with Framer CMS or works standalone with custom images. Perfect for product galleries, portfolios, and image showcases with smooth animations and fully customizable controls.
Switch between CMS Gallery mode (connect directly to your CMS gallery field) or Normal Gallery mode (add images manually) with a simple toggle.
Position thumbnails on any side (bottom, top, left, right) with automatic responsive behavior—side thumbnails switch to bottom on mobile. Auto-scrolling keeps the active thumbnail visible.
Smooth Transitions
Choose from 5 transition types: Slide, Fade, Scale, Slide+Scale, or Slide+Fade. Control animation speed and direction (horizontal/vertical) for the perfect effect.
Custom Arrows
Fully customizable navigation arrows with hover effects, custom icons support, and precise positioning controls.
Use Cases
Product Pages — Showcase multiple product images with thumbnail previews for e-commerce sites.
Portfolios — Display project galleries with smooth transitions and professional presentation.
Real Estate Listings — Present property photos with intuitive navigation.
Blog Galleries — Enhance articles with connected CMS image galleries.
Customization
Gallery Source
- Toggle between "CMS" and "Normal" modes
- For CMS: Connect your CMS Gallery component to the slot
- For Normal: Add images directly to the Gallery Images array
Large Image Settings
- Width/Height: Set dimensions (%, px, vh supported)
- Object Fit: Cover, Contain, Fill, None, Scale Down
- Border Radius: Round the image corners
- Animation: Speed, direction, and transition type
Thumbnail Settings
- Position: Bottom, Top, Left, Right
- Size & Gap: Control thumbnail dimensions
- Opacity: Active vs inactive states
- Animation: Scale, Lift, Glow, or Scale+Lift hover effects
- Border & Background: Full styling control
Arrow Controls
- Size, position, and border radius
- Colors for normal and hover states
- Upload custom arrow icons
Quick Tips
Responsive Thumbnails — Left/right positioned thumbnails automatically move to bottom on screens smaller than the breakpoint (default 768px).
CMS Connection — When using CMS mode, connect a CMS Gallery component to the slot. The main image becomes the first slide.
Performance — Use appropriately sized images. The component handles display sizing, but source images affect load time.
Transition Combos — Slide+Fade and Slide+Scale offer the most dynamic transitions for showcasing products.
License
Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.
Refund Policy
Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!
Why Designers Love This
Zero code required to create stunning, CMS-connected product galleries. Every aspect is customizable through Framer's properties panel—from thumbnail animations to arrow styling—making it perfect for e-commerce and portfolio sites where image presentation matters.
