The Thumbnail Slider widget for Elementor is a dynamic way to showcase images with an interactive thumbnail navigation system. With its multi-source functionality, you can populate your slider with data from various sources, including posts, meta fields, JSON, CSV files, galleries, terms, users, menus, and even API integrations. Whether you’re creating a product showcase, portfolio, or dynamic content slider, this widget offers seamless customization and flexibility. Let’s dive into its features and explore how you can make the most of it.
Let’s look at each of the options in the Thumbnail Slider widget for Elementor below.
Add a Thumbnail Slider Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Thumbnail Slider”
- Hover over the widget in the search results and click install
- Add the “Thumbnail Slider” widget to any Elementor Page
Source Settings
The Thumbnail Slider widget supports multi-source functionality, allowing you to populate dynamic, data-driven content from a variety of sources. These include items, posts, meta fields, JSON or CSV files, galleries, terms, users, menus, and even API integrations for ultimate flexibility.
Items
You can use the item repeater field as item source.
Posts
Display WordPress posts dynamically in thumbnail slider, including custom post types and fields for maximum flexibility.
WooCommerce Products
Use this to showcase WooCommerce product images, names, prices, and descriptions in the slider.
Meta Field
Use Meta as an item source for your thumbnail slider to dynamically display and manage content from your Meta data.
JSON or CSV
Load your slider with data from JSON or CSV files to easily manage and display structured content.
Gallery
You can use the gallery as the source for your items. Simply select multiple photos to create and customize a stunning gallery.
Terms
Use Terms as a source for your thumbnail slider to dynamically display and manage taxonomy terms from your WordPress site.
Users
You can use WordPress Users as an item source for your thumbnail slider to display and manage dynamic content from your site’s user data.
Menu
Use your WordPress Menu as a source for the thumbnail slider to dynamically display and manage menu items in a visually engaging layout.
RSS
Fetch and display items from an RSS feed. This is perfect for showcasing updates or content from external blogs.
API Integrations
Integrate an API into your thumbnail slider to dynamically fetch and display data from external systems or services.
General Settings
Autoplay
Enable automatic sliding of images in the slider.
Autoplay Hover Pause
It will pause autoplay when the user hovers over the slider.
Loop
It will repeat the slideshow continuously when enabled.
Slide Speed
Define the duration (in milliseconds) for each slide transition.
Autoplay Timeout
Set the delay in milliseconds before the next slide appears.
Transition Speed
Control the speed (in milliseconds) of the slide transition effect.
Number of thumbs
Specify the number of thumbnail images visible at a time.
Center Thumbs
Align the thumbnails to the center when enabled.
Image Size
Set the size of the images displayed in the slider.
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- WooCommerce Thumbnail (300x300)
- WooCommerce Single (max width 600)
- WooCommerce Gallery Thumbnail (100x100)
Layout Settings
Show Title
Enable to display the title.
Thumb Title
Select the title style for thumbnails.
None – Do not display a title for thumbnails.
Under – Display the title below the thumbnail.
Overlay – Display the title over the thumbnail.
Show Text
Enable to display the descriptive text.
Show Button
Show/hide the button on slider.
Show Arrows
Enable navigation arrows for the slider.
Arrows Settings
Left Arrow
Select the icon for the left navigation arrow or disable it.
Right Arrow
Select the icon for the right navigation arrow or disable it.
Items Setting
Manage the items of the thumbnail slider using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Define the title for the item.
Image
Set the image associated with the item.
Description
Add a text description for the item.
Item Link
Specify a URL or link for the item.
Link Text
Define the text for the clickable link button.
Thumb Title
Set the title for the thumbnail display.
Thumbnail Slider Widget Styling
There are a number of styling options that allow you to control every aspect of the widget’s design. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Slide Styling
Set the slider height, width, alignment, padding, overlay, radius, and image positioning.
Thumbnails Styling
You can set the thumbnail height, radius, border, spacing, margin, background and padding.
Thumb Title Styling
Set the thumb title color, typography, opacity, alignment, and padding.
Title Styling
Here, you can set the color, typography, and spacing of title element.
Text Styling
You can set the text color, typography, and spacing.
Button Styling
Set the button padding, radius, background, text color, spacing, border, and typography.
Nav Arrows Styling
You can set the horizontal and vertical positioning, radius, background, and icon color of navigation arrows.
Thumbnail Slider Design Examples For Elementor
Here are some live use cases for the Thumbnail Slider Widget.
Thumbnail Slider with autoplay option.
Thumbnail Slider with content in the foreground.
We hope this guide helped you explore the powerful features of the Thumbnail Slider widget. With its multi-source functionality and intuitive thumbnail navigation, you can create dynamic, data-driven sliders effortlessly. If you have any questions or need further assistance, feel free to reach out.
