An accordion is good at listing things; a carousel is good at showing one thing properly. Connected, the accordion becomes the navigation and the carousel becomes the stage.
The two are paired by putting the same Carousel ID on both blocks — opening an item moves the carousel to the matching slide.
Before You Start
- Edition: Pro — the carousel connection needs Nexter Blocks Pro.
- Block to enable: Accordion, switched on under Nexter > Blocks in your WordPress dashboard.
- A Carousel Anything block on the same page.
- An Accordion block — see the main Accordion guide.
Preview
Steps
- Add both blocks to the page — the Carousel Anything and the Accordion.
- On the Accordion, set a Carousel ID — for example
Ac1.
- Set the same ID on the Carousel Anything block.
- Give the carousel one slide per accordion item, in the same order.
- Publish and open the accordion items on the real page.
How It Behaves
The connection is made entirely by the shared ID: the accordion publishes it, and the carousel listens for it.
- Measured on a published page with the ID
Ac1: the accordion wrapper renderedid="tptab_Ac1",data-accordion-id="tptab_Ac1"anddata-connection="tpca-Ac1". - With no ID set, none of those attributes appear at all — measured — and no connection exists.
- This is the same pairing scheme the Carousel Remote and Interactive Circle Info use — the same
tptab_andtpca-pair — so if you know one, you know the others. See the Carousel Remote guide and the Interactive Circle Info guide. - Order is the mapping. The first item drives the first slide, so the two lists have to line up.
- Measured with Nexter Blocks Pro deactivated: this setting produces no attribute at all on the published page and the accordion falls back to plain click behaviour.
Limitations
- Both blocks need exactly the same ID. A mismatch means no connection at all, with nothing on the page to say anything is wrong.
- Give each pairing on a page its own unique ID, or two accordions will drive the same carousel.
- There is no automatic mapping. Adding an item without adding a slide quietly puts the two lists out of step.
- The connection runs on the published page, not in the editor.
- Pro only — measured with Pro deactivated, the connection attributes are absent entirely.
Troubleshooting
The carousel does not follow the accordion
Check the Carousel ID matches on both blocks exactly, that Nexter Blocks Pro is active, and that you are on the published page rather than the editor.
It moves to the wrong slide
The items and slides are out of order. The first item drives the first slide, and so on down the list.
Two accordions are driving the same carousel
They share an ID. Give each pairing its own unique value.
Nothing happens at all
Measured with Nexter Blocks Pro deactivated, the accordion renders no connection attributes whatsoever. Check Pro is active.
