In this tutorial, I'm going to show you how you can create an Elementor Pro popup that can has a carousel in it, and can be opened to a specific slide of that carousel directly from the page.
This will work with any carousel that uses the Swiper library: all of them from Elementor (even including background carousels and loop carousels), and those from Dynamic.ooo, PowerPack and Qi addons.
Here is an example of what we will be creating:
Features:
- Super easy to use: just set class name openPopupToSlide-2 on any element to have it open the popup to the slide 2 on click, for example.
- Show relevant content: show the relevant slide on opening the popup. Could prevent you from having to create 10 different popups; just create one with a slider with 10 slides in it.
- Works with any SwiperJS sliders: this makes it quite flexible. Works with the loop carousel, image carousel, slides element, etc. Works with the new "carousel" element. Works with addons that use SwiperJS for their sliders.
- Requires Elementor Pro.
Let's get started!
First, get your popup ready
This is a premium tutorial. Purchase access to unlock the full tutorial.