--- title: "How to Add Next /Previous Button in Elementor Horizontal Page Scroll?" url: https://theplusaddons.com/docs/add-next-previous-button-in-elementor-horizontal-page-scroll/ date: 2023-03-17 modified: 2026-09-14 lang: en author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2023/03/Previous-Button-in-Elementor-Horizontal-Page-Scroll_-1024x536.jpg word_count: 739 --- # How to Add Next /Previous Button in Elementor Horizontal Page Scroll? ## - Adds next/previous navigation buttons to Elementor horizontal scrolling sections using The Plus Addons for Elementor. - Utilizes the Horizontal Scroll widget and Carousel Remote widget to enhance user navigation experience. - Requires installation and activation of The Plus Addons for Elementor to access the Horizontal Scroll widget features. 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](https://theplusaddons.com/docs/horizontal-scroll-elementor-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/horizontal-scroll/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## 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. ![Unique Connection ID field in the Extra Options section of the Horizontal Scroll widget](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-unique-id.webp) ## 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**. ![Carousel Remote Content section with Unique Connection ID filled in and Remote Type set to Horizontal Scroll](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-remote-connect.webp) ## 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. ![Prev/Next section of the Carousel Remote widget with the Next/Prev Button toggle on](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-remote-prevnext.webp) ## 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. ![Button 1 Text and Button 2 Text fields in the Prev/Next section of the Carousel Remote widget](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-remote-prevnext-text.webp) ## The Result The buttons sit over the horizontal scroll section and move it one slide per click: ![Prev and Next buttons over a horizontal scroll section with the second slide in view](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-result-prevnext.webp) ## 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**. ## Related Docs - [Horizontal Scroll widget settings overview](https://theplusaddons.com/docs/horizontal-scroll-elementor-widget-settings-overview/)- [Add dots navigation in horizontal page scroll](https://theplusaddons.com/docs/add-dots-navigation-in-elementor-horizontal-page-scroll/)- [Add a progress bar in horizontal page scroll](https://theplusaddons.com/docs/add-progress-bar-in-elementor-horizontal-page-scroll/)