In this tutorial, I will show you how to create an Elementor carousel that is synced with an Elementor Tabs or Accordion element.
Here is a live example of what we are creating. Control both the carousel and the accordion, notice how the image is in sync with a particular accordion item.
The idea for this comes from this page by Apple, see the "Take a closer look" section.
Features:
- Synced harmony: The Tabs or Accordion element will be perfectly synced with the carousel
- Autoplay compatible: Set the carousel to autoplay, and the related Tabs or Accordion will automatically switch to the related item.
- Works for all sliders: Works for all carousels and sliders from Elementor Free and Pro, including the background slideshow option.
- Multiple on the same page: This works for 2, 3, or any amount of carousel synced with tabs or accordion items.
- Works for the new tabs and accordion element: This works for the relatively new tabs and accordion elements, where each tabs or accordion content is a container itself.
Let's get started!
First, let's give class names to your Elementor Carousel and Tabs or Accordion element
This is a premium tutorial. Purchase access to unlock the full tutorial.