---
title: "Linked Carousels — Thumbnail & Synchronized Navigation"
url: "https://divipeople.com/docs/divi-carousel-linked-carousels-doc.md"
canonical: "https://divipeople.com/docs/divi-carousel-linked-carousels-doc/"
published: "2026-08-08"
modified: "2026-08-08"
author: "Fahim Reza"
tags:
  - "Divi Carousel Free"
  - "Divi Carousel Pro"
---

# Linked Carousels — Thumbnail & Synchronized Navigation

**Linked Carousels** connect two carousel modules so they move together. Give both the same **Link Group** name, then set each one’s **Role**. This is how you build a thumbnail gallery — a large image above, a strip of small ones below that controls it.

## Key Features

- **Thumbnail navigation** — a strip of small slides drives a main carousel, and highlights whichever slide is showing.
- **Two-way synchronization** — two carousels set to *Main* drive each other in both directions.
- **Keyboard operable** — tab to a thumbnail and press Enter. The old Divi 4 thumbnail gallery was mouse-only.
- **Works across module types** — any two carousel modules that share a Link Group are connected.

## Building a Thumbnail Gallery

1. Add your **main** carousel. Set **Slides to Show** to `1` so one image fills the frame. A **Slide Ratio** of 16:9 keeps its height steady.
2. Open **Content → Carousel Settings** and set **Link Group** to any name you like — for example `gallery`. Set **Role** to **Main**.
3. Add a **second** carousel directly below it, containing *the same images in the same order*.
4. On the second carousel set **Slides to Show** to `5` or `6`, **Slide Ratio** to 1:1, and **Navigation** to **None**.
5. Give it the same **Link Group** — `gallery` — and set **Role** to **Thumbnail**.

Clicking any thumbnail now moves the main carousel, and the active thumbnail is highlighted as the main carousel changes.

> **Both carousels need the same slides, in the same order.** The link works by position, so thumbnail 4 shows main slide 4. If the two lists differ, the pairing will be wrong.

## Synchronizing Two Carousels

Set **both** carousels to **Role: Main** with the same Link Group, and they drive each other — moving either one moves the other. This is useful for pairing two different kinds of content, such as a photo carousel beside a caption carousel.

The two do not need the same slide count. If one shows two slides at a time and the other shows four, they stay in proportion rather than matching index for index.

## Settings Reference

- **Link Group** — any name. Two carousels are connected when this matches exactly. Use different names for different pairs on the same page.
- **Role: Main** — a primary carousel. Two Mains in one group drive each other.
- **Role: Thumbnail** — a navigation strip. It drives the Main carousel in its group and shows which slide is active.

## FAQ

### Can I have more than one linked pair on a page?

Yes. Give each pair its own Link Group name — for example `gallery` and `products`. Carousels only connect to others with an identical group name.

### Is this the Divi 4 thumbnail gallery?

It replaces it. Divi 4 used a setting called *asNavFor*; Link Group plus Role does the same job, and adds keyboard operation, which the Divi 4 version never had.

### Should the thumbnail carousel have arrows?

Usually not — set its Navigation to **None** so the main carousel’s arrows are the only ones on screen. Visitors can still swipe the strip directly.

### Nothing happens when I click a thumbnail.

Check that both carousels have exactly the same Link Group name, with no trailing space, and that one is set to **Main** and the other to **Thumbnail**. Two Thumbnails with no Main will not do anything.