All Swiper.js Instances in Elementor are Now Exposed

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.

Liked This Article?

We have a lot more where that came from! Join 2,699,773 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Udi Dollberg
Udi Dollberg
Udi is a talented developer in Elementor’s Editor team and loves cars, woodworking and classic jazz.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

6 Responses

  1. That doesn’t work in the current version, it leads to undefined. It used to work though in earlier versions of Elementor. Although the swiper object is present on the slider node, you can’t access it from a script.

    With plain JS, document.querySelector(‘.swiper-container’).swiper should be accessible for example. The object is also available in the browser window element.swiper or when logging the parent node, but somehow you can’t access it using dot notation.

    1. Hi Michiel,
      This feature has been tested in the latest release.
      If you still can’t get it to work, please open a ticket in our Github repository.
      Make sure you share your system info and your exact steps to reproduce your problem (including the code you are using).

      Good luck!

  2. The normal swiper banner I wrote will make the Counter-number to the WordPress elementor editor not work properly

Leave a Reply

Your email address will not be published. Required fields are marked *

What to share and get feedback about your code?

Join Our New Community Hub!

Never miss an update
Subscribe to our developer’s newsletter for every latest update