A carousel’s built-in dots are small, generic and hard to style. The Scroll Navigation block is none of those things — it has icons, tooltips, counters and six styles.
Connecting the two lets you switch the carousel’s dots off and drive it from the Scroll Navigation block instead.
Before You Start
- Edition: Pro — both blocks needs Nexter Blocks Pro.
- Blocks to enable: Carousel Anything and Scroll Navigation, both switched on under Nexter > Blocks.
- Both blocks on the same page. The connection is made in the browser between two elements on one page; it does not work across pages.
- One nav item per slide. The link is by position, so the counts need to match.
Steps
- Add content to the Carousel Anything slides, using either a pattern or the editor.
- On the carousel, open Dots & Arrow and switch the Dots toggle off, so you do not end up with two sets of navigation.
- Open Carousel Remote Sync ID and enter a value in Unique Carousel ID.
- On the Scroll Navigation block, enter the same value in its connection ID field.
- Add one navigation item per slide, in the same order as the slides, then publish.
The same value goes in both blocks. Each block writes its own ID and points its connection at the other one’s, so they only find each other when the two values match exactly.
How It Behaves
Measured on published output, this is what the two blocks write into the page:
| Block | Measured attributes |
|---|---|
| Scroll Navigation | id="tptab_<your-id>", data-tab-id="tptab_<your-id>" and data-connection="tpca-<your-id>" |
| Carousel Anything | id="tpca-<your-id>", data-id="tpca-<your-id>" and data-connection="tptab_<your-id>" |
- Each block points at the other. That is why one value in two fields is enough.
- The connection is two-way. Read from the shipped script: clicking a navigation item moves the carousel to that slide, and moving the carousel activates the matching navigation item. You do not have to choose a direction.
- The link is by position, not by name. Measured: each navigation item renders
data-tab="0","1","2"in menu order, and that number is the slide index. The first item drives the first slide regardless of what it is labelled. - With the ID left empty, none of those attributes is written at all. Measured on both blocks: no ID, no connection attribute, no link — and no warning either.
- The attributes sit on the Scroll Navigation block’s inner element, not its outer wrapper. Worth knowing if you are inspecting the page to check your setup.
- Edition: Pro — both blocks needs Nexter Blocks Pro. Measured with Pro deactivated, neither block renders.
Limitations
- Pro only, and both blocks are Pro. Without it there is nothing to connect.
- Same page only. The pairing happens in the browser between two elements, so a navigation block in a header template cannot drive a carousel elsewhere.
- Order matters more than labels. Because the link is positional, reordering slides without reordering navigation items silently mismatches them — item two will still go to slide two.
- A mismatch in counts is not reported. More navigation items than slides leaves items that go nowhere; fewer leaves slides unreachable from the navigation.
- Turn the carousel’s autoplay off. Autoplay is on by default on Carousel Anything and does not pause on hover, so a slider that keeps moving will fight the visitor using your navigation.
- An empty or mistyped ID fails silently. There is no message anywhere; the two blocks simply never find each other.
- One carousel per ID. Reusing the same value for two carousels on one page gives you two elements claiming the same ID.
Troubleshooting
Clicking the navigation does nothing
The two IDs do not match. They are case-sensitive and must be identical in both blocks. Check for a stray space at the end of one of them.
I still have the carousel’s own dots as well
The Dots toggle under Dots & Arrow on the carousel is still on. Switch it off.
The navigation jumps to the wrong slide
The link is by position. Your navigation items are in a different order from your slides, or the counts differ. Line them up one to one.
The carousel moves but the navigation does not highlight
That direction of the link needs the same matching ID. If clicking works but highlighting does not, check that you have one navigation item per slide — the highlight looks up an item by slide number and finds nothing if there are fewer items than slides.
How do I check my setup without guessing?
View the published page’s source. The Scroll Navigation block’s inner element should carry data-connection="tpca-<your-id>" and the carousel should carry id="tpca-<your-id>". If either is missing, the ID field is empty on that block.
Nothing renders at all
Both blocks are Pro. Without Nexter Blocks Pro active neither is registered.
