How To Use The Remote Pagination Widget By Atomic Addons

The Remote Pagination widget by Atomic Addons adds a row of numbered buttons that control a slider or carousel somewhere else on the page. A click on a number moves the carousel to that slide, and the number of the current slide is highlighted as the carousel moves. Because the buttons are a widget of their own, you can put them anywhere: beside the carousel, above it or in another column. This guide covers adding the widget, connecting it to a carousel and setting up the buttons.

It is one of four Remote widgets that work the same way. The others are Remote Arrows (previous and next 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 Pagination Widget

Remote Pagination 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 Pagination. You can also open the Creative category.

4. 4

   Turn the Remote Pagination widget on.

5. 5

   Click Save Settings.

Add the Remote Pagination 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 Pagination. 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 Pagination widget and type the same name in Content → Remote Pagination → 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 Pagination

The first section, Content → Remote Pagination, also holds Layout: Horizontal, the default, puts the buttons in a row; Vertical stacks them in a column.

Items

Content → Items lists the buttons. The first button moves to the first slide, the second to the second slide and so on, so add one button per slide. A new widget has five, numbered 1 to 5. Click a button to edit it:

1. 1

   Bullet Number: The text on the button. Any short text works, such as 01 or a word. Left empty, the button shows its position in the list.

Use + Add Item for another button and drag the buttons to change their order. When the carousel loops, the buttons follow its real slides, not the copies Swiper adds at the ends.

Style the Remote Pagination

The Style tab has one section, Remote Pagination:

• Alignment (left, center or right) and Spacing between the buttons, per screen size.
• Typography, Border, Border Radius and Padding of the buttons.
• Normal, Hover and Active tabs for the color, background, border color, height, width and shadow. Active styles the button of the current slide.