Not everyone realises that a horizontal scroll section moves when they scroll. A pair of buttons makes it obvious and gives people a way through it one slide at a time.
Connect the Carousel Remote widget to the Horizontal Scroll widget, both from The Plus Addons for Elementor, and you get exactly that.
To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Horizontal Scroll is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.
- Widget to enable: Horizontal Scroll, switched on under The Plus Addons > Widgets.
- Second widget to enable: Carousel Remote, also under The Plus Addons > Widgets. It is a Pro widget too.
- You need a template: an Elementor Library template whose top-level sections are the slides. The widget turns each top-level section of that template into one horizontal slide.
Step 1: Add a Connection ID to the Scroll Widget
Select the Horizontal Scroll widget, open Extra Options and type a name of your own in Unique Connection ID. This is what pairs the two widgets, so it has to be unique on the page.
Step 2: Point Carousel Remote at It
Add the Carousel Remote widget to the same page and open its Content section.
- Type the same value in Unique Connection ID.
- Set Remote Type to Horizontal Scroll. It starts on Carousel.
Step 3: Check the Buttons
Open the Prev/Next section. Next/Prev Button is already switched on, so the buttons are there as soon as the two widgets are connected. Use Position X and Position Y to place them over the slides.
Step 4: Change the Wording and the Icons
In the same section, Button 1 Text is the Next button and Button 2 Text is the Prev button. Icon Style switches the arrows between None, Style 1 and Custom, and Alignment sets how the text and icon line up.
The Result
The buttons sit over the horizontal scroll section and move it one slide per click:
Settings
| Setting | What it does | Default |
|---|---|---|
| Next/Prev Button | Shows the pair of buttons. | On |
| Position X / Position Y | Where the buttons sit over the slides. | — |
| Button 1 Text | The wording on the next button. | Next |
| Button 2 Text | The wording on the previous button. | Prev |
| Alignment | Left, centre or right within the button. | Left |
| Icon Style | None, the built-in Style 1 arrows, or Custom images of your own. | Style 1 |
How It Behaves
- At runtime the Carousel Remote markup is moved inside the horizontal scroll section, so the buttons stay on screen for the whole sideways run.
- One click moves exactly one slide, and the page scrolls smoothly to it.
- The buttons stop at the ends: there is nothing before the first slide and nothing after the last.
- With RTL Compatibility switched on in the scroll widget, the two buttons swap roles so they still read correctly right to left.
- Next/Prev Button is on from the start, so a freshly connected remote already shows buttons.
Limitations
- Both widgets are Pro only. With the Pro plugin off, neither the slides nor the buttons render.
- There is one pair of buttons per remote. You cannot place next and previous in two different parts of the page from the same widget.
- If the slides have different widths through Slides Width, a click lands off-centre, because the jump is worked out from the first slide’s width.
- The buttons do not disable themselves at the first or last slide — they simply do nothing.
Troubleshooting
The buttons appear but nothing moves
The two Unique Connection ID values have to match exactly, and Remote Type on the remote must be Horizontal Scroll.
The buttons scroll away with the page
They are only moved into the scroll section once the connection works. Fix the connection and they will travel with the slides.
Next goes backwards
RTL Compatibility is on in the scroll widget, which swaps the two buttons. Swap Button 1 Text and Button 2 Text if the wording no longer suits.
I want arrows only, without words
Clear Button 1 Text and Button 2 Text and leave Icon Style on Style 1.
