---
title: "CMS Gallery Slider"
canonical_url: "https://framerhub.io/components/cms-gallery-slider"
last_updated: "2026-06-15T14:46:29.018Z"
---

## 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.

## Features

**Dual Gallery Modes**
Switch between CMS Gallery mode (connect directly to your CMS gallery field) or Normal Gallery mode (add images manually) with a simple toggle.

**Smart Thumbnail Navigation**
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.

![CMS Gallery Slider Preview](/framerhub/img/components/control/cms-gallery-slider.jpg)

## How to Use

### Installation

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

**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.

---