--- title: "How to connect Process Steps with Carousel Anything Block in WordPress?" url: https://nexterwp.com/docs/connect-process-steps-with-carousel-anything-in-wordpress/ date: 2023-02-17 modified: 2026-09-28 lang: en author: "Aditya Sharma" description: "A process is a list of steps and a detailed explanation of each one. Showing all the detail at once makes the list hard to read; hiding it makes the..." image: https://nexterwp.com/wp-content/uploads/2024/05/connect-process-steps-with-carousel-anything-in-wordpress-1024x519.jpg word_count: 605 --- # How to connect Process Steps with Carousel Anything Block in WordPress? ## Key Takeaways - Nexter Blocks Pro activa Carousel Anything, porque el bloque no renderiza nada con Nexter Blocks Pro desactivado y se marca como un bloque solo para Pro. - La conexión entre Process Steps y Carousel Anything usa un ID compartido, y en Process Steps el interruptor de conexión también debe estar activado. - El orden controla el mapeo: el primer paso abre la primera diapositiva, el segundo paso la segunda, y así sucesivamente. - Cada pareja necesita su propio ID único, porque dos bloques de Process Steps pueden controlar el mismo carrusel si comparten el mismo ID. A process is a list of steps and a detailed explanation of each one. Showing all the detail at once makes the list hard to read; hiding it makes the steps useless. Connecting Process Steps to a carousel solves both: the steps stay visible as navigation, and the carousel shows the detail for whichever one is selected. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-carousel-sliders/) ## Before You Start - **Edition:** **Pro** — the Carousel Anything block needs Nexter Blocks Pro.- **Block to enable:** Carousel Anything, switched on under **Nexter > Blocks** in your WordPress dashboard.- A **Carousel Anything** block with one slide per step — see the [Carousel Anything guide](https://nexterwp.com/docs/add-carousel-anything-in-wordpress/).- A **Process Steps** block on the same page.- **Test with several slides.** A carousel with one slide has nothing to move to, so most settings will look broken when they are simply idle. ## Video Tutorial ## Steps - Add both blocks to the page — Process Steps and Carousel Anything. ![Adding the process steps and the carousel](https://nexterwp.com/wp-content/uploads/2023/02/carousel-anything-carousel-remote-process-steps-sync-id-new.webp) - Set a **Carousel ID** on the Carousel Anything block. - Set the **same ID** on the Process Steps block and switch its carousel connection on. - Give the carousel **one slide per step**, in the same order. - Publish and click through the steps on the real page. ## How It Behaves The connection is the shared ID, exactly as with the other paired blocks. - **Measured on a published page** with the ID `Ca1`: the carousel rendered `data-id="tpca-Ca1"` and `data-connection="tptab_Ca1"`. With no ID, neither attribute appears.- **This is the same pairing scheme used across Nexter Blocks** — the same `tpca-` and `tptab_` pair as [Carousel Remote](https://nexterwp.com/docs/add-carousel-remote-in-wordpress/), [Interactive Circle Info](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/) and [Accordion](https://nexterwp.com/docs/add-accordion-in-wordpress/). Learn it once and it applies to all of them.- **Order is the mapping.** The first step drives the first slide and so on, so adding a step without adding a slide quietly puts the two out of step.- **The connection needs both halves.** On the Process Steps side the toggle has to be on as well as the ID set — measured on the other connected blocks, an ID alone produces nothing.- **Every setting ends up in one place.** The block writes its whole configuration into a `data-splide` attribute on the carousel, which is what the slider script reads. If a setting is not doing what you expect, that attribute is where to look.- **Measured with Nexter Blocks Pro deactivated:** the carousel renders nothing at all — no wrapper, no configuration and no slides. This is a Pro-only block. ## Limitations - **Pro only** — measured with Nexter Blocks Pro deactivated, neither block renders anything.- **The two lists have to be kept in step by hand.** Nothing warns you when there are five steps and four slides.- **Give each pairing its own unique ID**, or two step blocks will drive one carousel.- **Process Steps has a known bug with its default active step**, reported to the development team — do not rely on a particular step being selected on load.- **On a phone the steps and the carousel stack**, so the visitor may not see the result of their click without scrolling. ## Troubleshooting ### The carousel does not follow the steps Check three things: the IDs match exactly on both blocks, the connection toggle is on, and you are on the published page rather than the editor. ### It moves to the wrong slide The steps and slides are out of order. The first step drives the first slide, and so on. ### Two step blocks drive the same carousel They share an ID. Give each pairing its own value. ### Nothing renders at all Check Nexter Blocks Pro is active. Measured with Pro off, Carousel Anything produces no output. ## Related Docs - [Connect Carousel Remote with a carousel slider](https://nexterwp.com/docs/connect-carousel-remote-with-carousel-slider-in-wordpress/)- [Add Carousel Anything in WordPress](https://nexterwp.com/docs/add-carousel-anything-in-wordpress/)- [Add an interactive circle in WordPress](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/)- [Add an accordion in WordPress](https://nexterwp.com/docs/add-accordion-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before connecting Process Steps to Carousel Anything in WordPress?** A: Nexter Blocks Pro has to be active, because Carousel Anything is a Pro-only block. The page also expects both blocks on the same page, with Carousel Anything set up as one slide per step. That matters because the mapping is one-to-one: if you test with only one slide, the carousel has nowhere to move and the setup can look broken even when it is just idle. **Q: How do Process Steps and Carousel Anything stay in sync?** A: The connection is driven by a shared ID, and the order has to match exactly. The first step controls the first slide, the second step controls the second slide, and so on. That means adding a step without adding a slide quietly breaks the pairing. Nexter Blocks uses the same tpca- and tptab_ pairing scheme as Carousel Remote, Interactive Circle Info, and Accordion. **Q: Why does my carousel not follow the steps?** A: The usual causes are simple but easy to miss: the IDs must match exactly on both blocks, the connection toggle on Process Steps has to be switched on, and you need to test on the published page rather than inside the editor. The page also notes that an ID by itself does nothing on connected blocks, so both halves of the pairing have to be set. **Q: What happens if the steps and slides are out of order?** A: The wrong slide opens because order is the mapping. The first step drives the first slide, then each later step follows in sequence. If you insert a new step without adding a matching slide in Carousel Anything, the two lists drift apart and users start landing on the wrong content even though the ID still matches. **Q: Can two Process Steps blocks control the same carousel?** A: That setup causes conflicts if they share an ID. Each pairing needs its own unique ID so one step list only drives one carousel. This is especially important in Nexter Blocks because the shared-ID system is what links paired blocks together, so reusing an ID makes two separate controls point at the same slider. **Q: Does this setup work well on mobile?** A: On phones, the steps and the carousel stack vertically, so visitors may not see the result of their click without scrolling. That is a layout issue rather than a broken connection. For real-world testing, publish the page and check how much vertical movement is needed after tapping a step, since mobile users can lose sight of the updated slide.