A step-by-step process is easier to follow when each step has a picture or a short demo next to it.
The Plus Addons for Elementor can connect the Process/Steps widget to a Carousel Anything slider. Hovering or clicking a step shows its slide, and moving the slider highlights the matching step.
To check the complete feature overview documentation of The Plus Addons for Elementor Carousel Anything widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — The Process/Steps connection needs The Plus Addons for Elementor Pro. The Carousel Anything widget itself is free.
- Widget to enable: Carousel Anything, switched on under The Plus Addons > Widgets.
- The Process/Steps widget switched on as well.
- A Carousel Anything widget with one slide per step (see the settings overview).
Step 1: Give the Carousel an ID
- Select the Carousel Anything widget.
- Open Content > Extra Options and type an ID in Unique Carousel ID, for example
plans.
Step 2: Connect the Steps
- Add the Process/Steps widget and add one step per carousel slide, in the same order.
- In Content, turn on Carousel Anything Connection.
- Type the same ID in Connection Carousel ID.
- Choose Effect on: Hover (the default) or Click.
Publish the page and try it on the front end.
How It Behaves
- With Click, clicking the third step moves the carousel to the third slide and highlights that step. Hovering a step does nothing.
- With Hover, pointing at the third step moves the carousel to the third slide.
- It also works the other way: when the carousel moves to the fourth slide, the fourth step becomes active.
Limitations
- Steps and slides are matched by position only. Keep them in the same order and number.
- The connection is not part of the free plugin: in the free Process/Steps widget, Carousel Anything Connection only shows an upgrade notice.
Troubleshooting
Selecting a step does not move the carousel
- Check that both IDs are exactly the same, with no spaces.
- Check Effect on: with Click, hovering does nothing.
The wrong step is highlighted
Put the steps in the same order as the carousel slides.
