CMS Gallery Slider

Professional Gallery Sliders for CMS Collections

Turn your CMS product galleries into polished, interactive sliders with animated transitions and thumbnail navigation. Perfect for e-commerce, portfolios, and any project where image presentation matters.

Designed for agencies and freelancers building CMS-powered sites in Framer.

Features

Dual Mode Support Switch between CMS Gallery fields or standard image arrays—one component handles both workflows seamlessly.

Five Transition Styles Choose from Slide, Fade, Scale, Slide + Scale, or Slide + Fade animations. Set your own speed and direction (horizontal or vertical).

Flexible Thumbnail Layouts Position thumbnails on any side—top, bottom, left, or right. Automatically adapts to bottom placement on small screens for perfect mobile experience.

Complete Styling Control Customize every detail from Framer's properties panel: thumbnail size, spacing, borders, padding, hover effects, and four different animation types (Scale, Lift, Glow, or Scale + Lift).

Smart Navigation Optional arrow controls with full customization—size, position, colors, borders, hover effects, and even custom icon uploads. Active thumbnails auto-scroll into view.

Container-Level Customization Style both the main image container and thumbnail container independently with backgrounds, padding, borders, and border radius.

Use Cases

E-commerce Product Pages — Showcase product images from CMS with professional slider navigation and zoom-ready thumbnails

Portfolio Projects — Display project galleries with smooth transitions that let your work shine without distraction

Real Estate Listings — Present property photos with intuitive thumbnail navigation for easy browsing of multiple views

Case Study Pages — Walk visitors through project phases or results with organized, clickable image sequences

Fashion & Lifestyle Sites — Create magazine-quality product presentations with hover effects and elegant transitions

How to Use

Installation

After purchasing from FramerHub:

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find CMS Gallery Slider in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

Customization

Everything you need is in Framer's properties panel:

Gallery Source

• Gallery Source Toggle: Choose between CMS Gallery or Normal (standard image array)
• Connect CMS Gallery: Drop your CMS Gallery component here (CMS mode)
• Main Image: Your hero/main product image (works in both modes)
• Normal Gallery Images: Connect your image array field (Normal mode)

Large Image

• Width/Height: Set custom dimensions or use percentages
• Object Fit: Control how images fill the container
• Border Radius: Rounded corners for the main image
• Slide Speed: Animation duration (0.2-2 seconds)
• Slide Direction: Horizontal or Vertical transitions
• Transition Type: Slide, Fade, Scale, Slide + Scale, or Slide + Fade
• Custom Scale/Fade: Fine-tune opacity and scale values for your chosen transition

Large Image Container

• Padding, Background, Border, Border Radius: Style the wrapper around your main image

Thumbnails

• Height, Gap, Position: Control size, spacing, and placement
• Responsive Breakpoint: Set the screen width where side thumbnails move to bottom
• Hover/Active/Inactive Opacity: Control visibility states
• Animation Type: Choose Scale, Lift, Glow, or Scale + Lift effects
• Background, Padding, Border, Border Radius: Style individual thumbnails

Thumbnail Container

• Padding, Background, Border, Border Radius: Style the thumbnail strip wrapper

Arrows

• Show/Hide navigation arrows
• Button Width/Height: Size of arrow containers
• Icon Size: Control icon/image size independently
• Position: Distance from edges
• Colors: Icon color, background, hover states
• Border, Border Radius: Full styling control
• Custom Icons: Upload your own arrow images (optional)
• Hover Scale/Colors: Interactive feedback effects

Gap

• Spacing between main image and thumbnails (0-100px)

Quick Tips

Best CMS Setup — Use a Gallery field in your CMS for multiple images, connect it to the "Connect CMS Gallery" slot. Your main image will be the first slide

Mobile Optimization — Set Responsive Breakpoint to 768px. Left/Right thumbnails automatically move to Bottom on smaller screens

Performance — Keep thumbnail height between 70-100px for smooth scrolling. The component handles rendering optimization automatically

Transition Choices — Use "Slide" for classic e-commerce feel, "Fade" for minimal transitions, "Slide + Scale" for premium, dynamic movement

Thumbnail Animations — "Scale" works universally well. "Glow" adds premium polish. "Scale + Lift" creates the most dramatic hover effect

Custom Arrows — Upload SVG or PNG icons for arrows to match your brand. Icon size controls scale independently from button size

License

Single Use License — Use in unlimited client projects with full commercial rights. No redistribution.

Why Designers Love This

No complex setup or external dependencies. Connect your CMS Gallery field or image array, choose a transition style, position your thumbnails—done. The component handles CMS data extraction, responsive behavior, and smooth animations automatically.

Perfect for agencies building e-commerce sites with dynamic product galleries and freelancers who need professional image sliders that work seamlessly with Framer CMS.