--- title: "How to Connect Interactive Circle Info with Carousel Anything in WordPress?" url: https://nexterwp.com/docs/connect-interactive-circle-info-with-carousel-anything-in-wordpress/ date: 2024-12-06 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Connect-Interactive-Circle-Info-with-Carousel-Anything-in-WordPress_-1024x519.jpg word_count: 579 --- # How to Connect Interactive Circle Info with Carousel Anything in WordPress? ## Key Takeaways - Interactive Circle Info y Carousel Anything se conectan con el mismo Carousel ID en ambos bloques, por ejemplo Ic1, para que el círculo actúe como navegación del carrusel. - La conexión necesita dos cosas: el interruptor de conexión activado y un ID; con el interruptor apagado, aunque el ID sea el mismo, no existen atributos de conexión ni hay enlace. - El comportamiento depende del disparador: con hover el carrusel sigue el elemento sobre el que pasa el visitante, y con click sigue lo que selecciona; en pantallas táctiles, hover no existe. 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](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-interactive-circle-infographic/) ## 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](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/). ## 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 renders `id="tptab_Ic1"` and `data-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_` and `tpca-` pair — so if you know one, you know the other. See the [Carousel Remote guide](https://nexterwp.com/docs/add-carousel-remote-in-wordpress/).- **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. ## Related Docs - [Add an interactive circle in WordPress](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/)- [Add a Carousel Remote in WordPress](https://nexterwp.com/docs/add-carousel-remote-in-wordpress/)- [Create one page scroll navigation in WordPress](https://nexterwp.com/docs/create-one-page-scroll-navigation-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)