In this documentation, we will discuss the customization of the Remote Thumbs slider widget, brought to you by the Prime Slider addon for Elementor. Please remember that the Remote Thumbs are only compatible with Swiper-based slider or carousel widgets. It acts as a separate navigation element that can be customized and positioned independently from the main slider layout.

Enable The Remote Thumbs Widget

Enable the widget.png

To use the Remote Thumbs widget from Prime Slider, first, you have to enable the widget.

  1. Go to WordPress dashboard > Prime Slider Plugin dashboard.

  2. Then, Click the Core Widgets Tab.

  3. Search the Remote Thumbs widget Name.

  4. Enable the Remote Thumbs widget.

  5. Hit the Save Settings Button.

Inserting The Remote Thumbs

To use a remote widget, first add a Swiper-based slider like the Coddle Slider (for example) to your page in Elementor, then link it to the remote widget. Make sure both Elementor and Prime Slider are installed before using the widget.

Drag & Drop the slider.png

  1. Go to the Elementor Editor Page and Hit the “+” icon Button.

  2. Search the Coddle slider.

  3. Drag the widget and drop it on the editor page.

Drag & Drop the remote widget.png

After adding the Coddle Slider, insert the Remote Thumbs widget anywhere on the page. It doesn’t need to be directly below the slider. It will work from any position.

  1. Go to the Elementor Editor Page and hit the “+” icon Button.

  2. Search the Remote Thumbs widget.

  3. Drag the widget and drop it on the editor page.

Linking the Remote Thumbs with the Slider

Set CSS ID for the Slider

Select Slider (Coddle) > Advanced > Layout > CSS ID

Set CSS for Coddle Slider.png

1. CSS ID: You have to assign a CSS ID to the slider to link up with the remote Thumbs. For example, we have used the CSS ID as Coddle and copied it to use later on the remote Thumbs widget.

Set CSS ID for the Widget

Go to Content > Remote Thumbs

Set CSS for remote widget.png

1. Remote Carousel ID: In this option, you have to paste the CSS ID that was already used and copied on the slider CSS ID option. (Note: Please remember that the CSS ID has to be the same on both the slider and the widget, or else the Thumbs won’t be visible.)

The link up with the Coddle Slider and the Remote Thumbs widget is done. Now let’s customize the Remote Thumbs.

Work With The Content Tab

Remote Thumbs Section

Go to Content > Remote Thumbs

C. Remote Thumbs.png

  1. Remote Carousel ID: You can link the widget with the slider with this option. (Note: Please see the Linking the Remote Thumbs with the Slider Section above to find out how this option works.)

  2. Slider / Carousel Loop Status: Enable the toggle to ensure proper syncing with the connected slider, enable it only if the slider's loop is active and deactivate the toggle if the connected carousel or slider loop feature is off.

Items Section

Go to Style > Items

C. Items 01.png

  1. Close Item: You can delete the Slider item by clicking the Close icon button.

  2. Copy Item: This option lets you copy the same item.

  3. Add Item: You can add a new item by clicking the “+”Add Item button.

  4. Image Resolution: You can adjust the image resolution with this option.

C. Items 02.png

We have more options for each item. Let’s proceed to the inner option -
5. Bullet Number: You can change the bullet number with this option.

Work with The Style Tab

Remote Thumbs Section

 Go to Style > Remote Thumbs

S. Remote Thumbs 01.png

  1. Alignment: You can move the Thumbs position to left, center or right with this option.

  2. Spacing: You can adjust the space between the Thumbs numbers with this option.

  3. Border Type: You can add or change the border type with this option.

  4. Border Width: This option controls the thickness of the border.

S. Remote Thumbs 02.png

  1. Border Color: You can change the border color with this option.

  2. Border Radius: This option controls the roundness of the border.

  3. Padding: You can adjust the inner space of the thumbs with this option.

S. Remote Thumbs - Normal.png

In this section, we have two more tabs. These are Normal & Active. Let’s start with the Normal Tab -

  1. Height: You can make changes to the Thumbs’ height with this option.

  2. Width: You can make changes to the Thumbs’ width with this option.

  3. CSS Filters: This setting lets you apply visual changes to the image. In this setting, you can modify properties like Blur, Brightness, Contrast, Saturation, and Hue.
    - Blur: Softens the image, reducing sharpness.
    - Brightness: Adjusts the overall lightness or darkness.
    - Contrast: Modifies the difference between light and dark areas.
    - Saturation: Controls the intensity of the colors.
    - Hue: Shifts the overall color spectrum.

  4. Box Shadow: You can add a shadow effect around the Thumbs and customize it with this option.

S. Remote Thumbs - Active.png

Now, let’s proceed to the Active Tab -

  1. Height: You can make changes to the Thumbs’ active height with this option.

  2. Width: You can make changes to the Thumbs’ active width with this option.

  3. Border Color: You can change the active border color with this option.

  4. CSS Filters: You can customize the active thumbs image by Blur, Brightness, Contrast, Saturation, and Hue with this option.

  5. Box Shadow: You can add a shadow effect around the Thumbs and customize it with this option.

All done! You have successfully customized the Remote Thumbs widget on your website.

Video Assist

You can also watch the video tutorial to learn more about the Remote Thumbs widget. Please visit the demo page for examples.

Thanks for being with us.