Get Premium

Elementor Carousel With Thumbnails Slider

Element.How also offers premium tutorials! Check them here:

Table of Contents

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:

Copy Template
Download Template

Please purchase access and be logged in to access this template.

 

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.

Access tutorial

$39/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial: Elementor Carousel With Thumbnails Slider
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 30 day money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

4 Responses

    1. Hey Devin!

      Yes it could work with a loop carousel too, it should work with all carousels from Elementor. You would probably want an image carousel for the thumbnails, and they would control the loop carousel.

      Cheers!

  2. Hey Maxime!
    I finally got to start developing using this tutorial.
    Any way to leave the highlighted thumb to the left (or right) instead of centered?

    Cheers!

    1. Hey Devin!

      It's possible to have it on the left, then it will always be the very first one on the left though. It's not possible for the thumbnails slider to stay in place and not slide at all, if that's what you were looking for.

      To have it on the left instead of the middle, change this line:

                  if ((firstThumbnailsSwiper && firstThumbnailsSwiper.swiper.passedParams.centeredSlides === true) || flag > 90) {

      To this:

                  if ((firstThumbnailsSwiper && firstThumbnailsSwiper.swiper.passedParams.loopedSlides === 12) || flag > 90) {

      And lower down, delete this line:

                  centeredSlides: true,

      I hope this helps!

      Cheers!

Leave a Reply

Element.How Newsletter

Sign up for our newsletter to get Elementor related updates and tutorials

Close