Skip to content

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

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.

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.