The circle is good at showing a set of items; a carousel is good at showing one piece of content at a time. Connected, the circle becomes the navigation for the carousel.
The two blocks are paired by putting the same Carousel ID on both.
For every Nexter Blocks setting in one place, see the Interactive Circle Info guide.
Before You Start
- Edition: Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.
- Block to enable: Interactive Circle Info, switched on under Nexter > Blocks in your WordPress dashboard.
- A Carousel Anything block on the same page.
- An Interactive Circle Info block — see the main Interactive Circle guide.
Video Tutorial
Steps
- Add both blocks to the page — the Carousel Anything and the Interactive Circle Info.
- On the Interactive Circle, switch the carousel connection on.
- Set a Carousel ID on the circle — for example
Ic1.
- Set the same ID on the Carousel Anything block.
- Publish and move through the circle items on the real page.
The connection needs both the toggle and an ID. Measured: with the toggle on and an ID set, the block carries the connection attributes; with the toggle off and the same ID, they are all empty and no connection exists.
How It Behaves
The connection is made by the shared ID: the circle publishes it, and the carousel listens for it.
- The connection needs both the toggle and an ID. Measured: with the toggle on and an ID set, the block carries the connection attributes; with the toggle off and the same ID, they are all empty and no connection exists.
- Measured attributes with the toggle on and the ID
Ic1: the circle rendersid="tptab_Ic1"anddata-connection="tpca-Ic1", plus the trigger it was given. - With the toggle off and the same ID, measured: all three are empty and no connection exists.
- This is the same pairing scheme the Carousel Remote uses — the same
tptab_andtpca-pair — so if you know one, you know the other. See the Carousel Remote guide. - The trigger still applies: with hover the carousel follows the item the visitor is over; with click it follows what they select.
Limitations
- Both blocks need the same ID, exactly. A different ID on either side means no connection at all, with nothing to show that anything is wrong.
- The toggle is easy to miss. Measured: an ID with the toggle off produces no connection attributes whatsoever.
- Give each pairing on a page its own unique ID, or two circles will drive the same carousel.
- The connection runs on the published page, not in the editor.
Troubleshooting
The carousel does not follow the circle
Check three things: the connection toggle is on, the Carousel ID matches on both blocks exactly, and you are on the published page rather than the editor.
I set the ID but nothing happens
The connection needs both the toggle and an ID. Measured: with the toggle on and an ID set, the block carries the connection attributes; with the toggle off and the same ID, they are all empty and no connection exists.
Two circles are driving the same carousel
They share an ID. Give each pairing its own unique value.
It works on desktop but not on a phone
The trigger is probably set to hover, which does not exist on a touch screen. Set it to click.
