How To Use The Remote Arrows Widget By Atomic Addons

The Remote Arrows widget by Atomic Addons adds a pair of Prev and Next buttons that control a slider or carousel somewhere else on the page. Because the buttons are a widget of their own, you can put them anywhere: next to the heading above a carousel, under it or in another column. This guide covers adding the widget, connecting it to a carousel and setting the text and icons.

It is one of four Remote widgets that work the same way. The others are Remote Pagination (numbered buttons), Remote Fraction (a counter such as “01 / 05”) and Remote Thumbs (image thumbnails). You can use several of them on the same carousel.

Enable the Remote Arrows Widget

Remote Arrows is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Remote Arrows. You can also open the Creative category.

4. 4

   Turn the Remote Arrows widget on.

5. 5

   Click Save Settings.

Add the Remote Arrows Widget

Put the carousel on the page first, then add the buttons:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Remote Arrows. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Connect the Carousel

The widget works with any slider or carousel built with Swiper, the library behind the carousels in Atomic Addons and Elementor. That includes the Slider, Static Carousel, Logo Carousel, Post Carousel, Product Carousel and Review Card Carousel widgets. To point the widget at a carousel, give the carousel an ID:

1. 1

   Select the carousel and open its Advanced tab.

2. 2

   In CSS ID, type a name that is used nowhere else on the page, such as home-slider.

3. 3

   Select the Remote Arrows widget and type the same name in Content → Remote Arrows → Remote Carousel ID, without a # in front.

The ID can also be on a section or container that holds the carousel: the widget then controls the first carousel inside it.

If you leave Remote Carousel ID empty, the widget looks for a carousel by itself: first in the section or container it sits in, then in the ones around that. It takes the first carousel it finds, so this suits a page where the buttons and the carousel share a container. On a page with more than one carousel, set an ID.

The carousel keeps its own arrows and dots. To control it only with the Remote widgets, set the carousel's Navigation control to None.

Remote Arrows

Content → Remote Arrows also sets what the two buttons show:

1. 1

   Arrows Icon: Default shows Elementor's left and right arrow icons. Custom adds an Icon picker to the tabs below, so you can choose any icon or upload an SVG.

2. 2

   Next: The next button. Text is “Next” by default; with Custom icons, Icon is an angle pointing right. The text comes before the icon.

3. 3

   Previous: The previous button. Text is “Prev” by default; with Custom icons, Icon is an angle pointing left. The icon comes before the text.

Clear both Text fields for icon-only buttons. When the carousel doesn't loop, the button that can't go any further is dimmed at the first and last slide.

Style the Remote Arrows

The Style tab has one section, Remote Arrows:

• Alignment (left, center or right), Typography of the text, Arrows Space Between the two buttons and Icon/Text Space Between inside each button (both 10px by default), and Icon Size.
• Normal and Hover tabs. Normal sets the color, background, border, border radius, padding and shadow of the buttons; Hover the color, background, border color and shadow.