Elementor uses Swiper, an external JS library, to power all of the sliders and carousels in the editor. Swiper has an extensive API which provides methods and events which can be utilized to control and manipulate the slider/carousel and its behavior.
Up until Elementor 2.9.0, the Swiper instances used in our widgets and other features were contained in our JS handler classes and not exposed in the front end.
Following requests from our developer user base, we have decided to make all of the Swiper instances used in Elementor and Elementor Pro available in the frontend.
Swiper uses the class 'swiper-container' in the slider wrapper element. Starting in Elementor 2.9.0, the Swiper instance will now be available in the cache of this element’s jQuery instance.
To access a slider or carousel’s Swiper instance, create a jQuery instance targeting the slider’s container, and query the element’s data cache with the key 'swipe'.
How to Access a Swiper Instance
1. Add an image carousel to an Elementor page/post.
2. Edit the widget > Go to Advanced > Advanced
3. Give the widget a unique class name/ID in the “CSS ID” or “CSS Classes” field.
4. In your Javascript file, create a jQuery instance of the carousel’s 'swiper-container' element using the ID/class you chose and the 'swiper-container' class (replace #my-id with your ID/class):
const imageCarousel = jQuery ( '#my-id .swiper-container' );
5. Now, get the Swiper instance by querying your carousel instance’s data cache using the key 'swiper':
const swiperInstance = imageCarousel.data( 'swiper' );
The swiperInstance constant now holds a reference to our carousel’s Swiper instance. You can now call Swiper methods on this variable, add event listeners, and generally taking advantage of everything the Swiper API has to offer.
Usage Example
Here is an example code snippet you can use to change the active slide to the slide of your choice. Replace #my-id with your ID/class, and replace 0 with the slide number you want to change to:
const imageCarousel = jQuery ( '#my-id .swiper-container' ),
swiperInstance = imageCarousel.data( 'swiper' );
swiperInstance.slideTo( 0 );
Open the page with your image carousel (in the frontend), paste this into your developer console and run it to change the active slide to the slide of your choice.
Read More »
