How To Use The Remote Thumbs Widget By Atomic Addons

The Remote Thumbs widget by Atomic Addons adds a row of small round images that control a slider or carousel somewhere else on the page. A click on a thumbnail moves the carousel to the matching slide, and the thumbnail of the current slide grows a little and gets a dark ring. Because the thumbnails are a widget of their own, you can put them anywhere: under the carousel, beside it or in another column. This guide covers adding the widget, connecting it to a carousel and choosing the images.

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 Fraction (a counter such as “01 / 05”). You can use several of them on the same carousel.

Enable the Remote Thumbs Widget

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

4. 4

   Turn the Remote Thumbs widget on.

5. 5

   Click Save Settings.

Add the Remote Thumbs Widget

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

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Remote Thumbs. 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 Thumbs widget and type the same name in Content → Remote Thumbs → 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 thumbnails 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 Thumbs

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

Items

Content → Items lists the thumbnails. The first thumbnail moves to the first slide, the second to the second slide and so on, so add one thumbnail per slide, in the same order as the slides. A new widget has five placeholders:

1. 1

   Choose Image: Click a thumbnail in the list, then choose or upload its picture, usually the same image as its slide.

2. 2

   Image Size: Under the list: which size WordPress serves for every thumbnail, Medium by default. The thumbnails show at 56px, so a small size such as Thumbnail loads faster.

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

Style the Remote Thumbs

The Style tab has one section, Remote Thumbs:

• Alignment (left, center or right) and Spacing between the thumbnails, per screen size.
• Border, Border Radius, Padding and Background Color of the images. The default is a round image with a thin ring; set the radius to 0 for square thumbnails.
• Normal, Hover and Active tabs. Normal sets the height, width, CSS filters and shadow; Hover the border color; Active the height, width, border color, CSS filters and shadow of the current slide's thumbnail.