In this tutorial, I will show you how to create an Elementor carousel with thumbnail images below it.
Here is a simple example of what we are creating:
Features:
- Can be dynamic: This can work with an ACF, Pods or JetEngine Gallery field, so you can make it part of a Single Post Template if you need. Ideal for portfolio items.
- Make it your own: The carousels used can be any from Elementor, so you could also use a testimonial carousel for example, with photos of the persons giving the testimony being the thumbnails.
- Click to navigate: Clicking the thumbnails automatically navigates both sliders to the clicked thumbnail.
- Mobile ready: Works well on mobile too!
Elementor already has a limited solution for this: with Elementor Pro, you can make use of the media carousel element and use the Slideshow option, and you will get something similar. However it can't be dynamic (fed from an ACF, Pods or JetEngine gallery field, for example).
The current solution works with any and all Elementor Pro carousels, so it is very flexible. You might use the image carousel linked to an ACF gallery field for portfolio items, for example.
This works for any and all carousel elements from Elementor free and Pro, and could work to sync any two of them together, so your creativity is the limit here!
Let's get started!
First, let's give class names to your Elementor Carousels
This is a premium tutorial. Purchase access to unlock the full tutorial.