How To Use The Remote Fraction Widget By Atomic Addons

The Remote Fraction widget by Atomic Addons shows which slide a slider or carousel is on, as a counter such as “01 / 05”: the current slide, a slash and the number of slides. It follows a carousel somewhere else on the page and updates each time the carousel moves. Because the counter is a widget of its own, you can put it anywhere, such as next to a heading above the carousel. This guide covers adding the widget, connecting it to a carousel and styling the numbers.

It is one of four Remote widgets that work the same way. The others are Remote Arrows (previous and next buttons), Remote Pagination (numbered buttons) and Remote Thumbs (image thumbnails). The counter only shows the position, so pair it with Remote Arrows or one of the others to let visitors move the carousel.

Enable the Remote Fraction Widget

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

4. 4

   Turn the Remote Fraction widget on.

5. 5

   Click Save Settings.

Add the Remote Fraction Widget

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

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Remote Fraction. 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 Fraction widget and type the same name in Content → Remote Fraction → Remote Carousel ID, without a # in front.

The ID can also be on a section or container that holds the carousel: the widget then follows 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 counter and the carousel share a container. On a page with more than one carousel, set an ID.

Remote Fraction

Content → Remote Fraction holds two more controls:

1. 1

   Alignment: How the current number lines up with the smaller total: Top, Middle or Bottom, per screen size. Left unset, the numbers share a baseline.

2. 2

   Digit Pad: How many digits each number has, filled with leading zeros: 2 by default, which shows “01 / 05”. Set it to 1 for “1 / 5”, or 3 for “001 / 005”.

The total counts the carousel's real slides. When the carousel loops, the copies Swiper adds at the ends are not counted.

Style the Remote Fraction

Everything below is on the Style tab:

• Remote Fraction — Alignment (left, center or right) and Spacing between the numbers and the slash, then a Current tab and a Total tab with the color, text shadow and typography of each number. By default the current number is large and the total small.
• Separator — the Color and Size of the slash.