Build

Connecting widgets

Drive one widget from another — a Swapper controlled by tabs, an accordion, or arrows and dots you placed anywhere on the page.

Most sliders trap their controls inside themselves: the arrows sit where the slider allows, and that is that. NovaSpark separates the two. A Swapper or Carousel shows the content, and something else entirely can drive it — a tab row, an accordion, arrows in the opposite column.

Every connection works the same way: give the slider a CSS ID, then name that ID on the control.

Making the connection #

Add the sliderAn NovaKit Swapper or NovaKit Carousel, with its slides set up.
Give it an IDSelect it, open the Advanced tab, and set CSS ID to something you will recognise — features, say. Lower case, no spaces.
Add the controlA NovaKit Tabs, Accordion, Slider Navigation or Slider Pagination widget, anywhere on the page.
Point it at the sliderIn the control’s settings, put that same ID in Target Slider ID.

The two must match exactly. features and Features are different IDs. A control pointed at an ID that does not exist does nothing at all — it will not warn you, because it cannot know whether the slider is simply further down the page.

The control never moves or wraps the slider — it talks to it through the slider’s own scripting interface. So the two can sit in different columns, different sections, or opposite ends of the page, and both keep their own styling.

What can drive what #

Control	Gives you
NovaKit Tabs / Switcher	A tab row, pill group or toggle that changes the slide.
NovaKit Accordion	Opening a panel changes the slide — the usual "list on the left, image on the right" pattern.
NovaKit Slider Navigation	Previous and next arrows, placed anywhere.
NovaKit Slider Pagination	Dots, numbers, a counter or a progress bar.

All four can point at the same slider at once. A tab row above, arrows beside the heading and a progress bar underneath all stay in step, because each one is reading the slider rather than tracking its own position.

Tabs driving a Swapper #

NovaKit Tabs has a Panels setting with two modes, and this is the one people miss:

In This Widget	The tabs hold their own panels. A self-contained tabbed section.
Elsewhere (Connected)	The tabs render only the navigation and drive a NovaKit Swapper. The panels live in the Swapper.

Build the SwapperOne slide per tab, in the order the tabs will appear. Give it a CSS ID.
Add NovaKit Tabs where the row belongsOften above the Swapper, sometimes beside it.
Set Panels to Elsewhere (Connected)The panel controls disappear, since the Swapper owns the content now.
Enter the Target Slider IDAdd one tab item per slide, with just a label — and an icon or badge if you want one.

Order matters, and nothing enforces it. Tab one drives slide one. Add a slide in the middle of the Swapper later and every label after it points at the wrong content, with no error — the labels and the slides are matched by position, not by name.

Why bother, when tabs can hold their own panels? Because a Swapper cross-fades, animates between slides, and can build its slides from posts. Connected tabs give you that motion with a tab row driving it, which panels inside the Tabs widget cannot do.

An accordion driving a Swapper #

Same idea, different control. Opening an accordion panel changes the slide — the pattern where a list of features sits on the left and the matching screenshot fades in on the right.

Build the SwapperOne slide per accordion item. Give it a CSS ID.
Add NovaKit Accordion beside itUsually in a second column of the same container.
Enter the Target Slider IDNow opening an item advances the Swapper to the matching slide.

Item order matches slide order here too.

Arrows and dots anywhere #

NovaKit Slider Navigation and NovaKit Slider Pagination are separate widgets rather than settings inside the slider, and that is the point — you can put them where the design wants them:

Arrows in the top-right corner, level with the section heading.
A progress bar spanning the full width beneath a slider that is only half as wide.
A slide counter in the opposite column.

Both take a Target Slider ID and are styled like any other widget. Pagination offers dots, numbers, a counter such as 03 / 08, or a progress bar.

When a connection does nothing #

Symptom	Usual cause
Clicking the control does nothing	The IDs do not match. Check the slider’s Advanced → CSS ID against the control’s Target Slider ID, including capitals.
The tab row shows empty panels below it	Panels is still In This Widget. Switch it to Elsewhere (Connected).
Tabs change the wrong slides	The counts differ, or a slide was inserted mid-list. They pair by position.
It works on the page but not in the editor	Expected. The connection runs on the real page — use Elementor’s Preview.
Two sliders both react	Two sliders share a CSS ID. An ID has to be unique on the page.