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,940,576 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

30 Responses

  1. Using your example I was able to get the swiper instance when setting a column to background slideshow and it works great to control it with the build in methods. But when trying to get the swiper instance from other widgets (tried the testimonials slider, the slides slider, the portfolio slider) using the same examples I was getting “undefined” when trying to get the swiper instance. Could you assist me with what I’m doing wrong?

    I’m using elementor version 2.9.6 and elementor pro version 2.8.5

  2. I did not get this part :

    “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):”

    Where is that Javascript file?

  3. I am using Media carousal . I want to use Swiper autoplay stop function on one click event. How I can achieve that ?
    Bellow code I checked in console but not working for media carousal.
    const imageCarousel = jQuery ( ‘#my-id .swiper-container’ ),
    swiperInstance = imageCarousel.data( ‘swiper’ );
    swiperInstance.slideTo( 0 );

    Please guide me how to get object of Swiper so I can perform autoplay stop on click event.

    Thanks

  4. It´s important to mention that when registering our script, we should add “swiper” to the dependencies array, otherwise this will not work if we are including it into a custom plugin or theme.

    Somenthing like this:
    wp_enqueue_script( $handle, $src, [ ‘jquery’, ‘swiper’], $version, true );

    Thanks!

  5. this works with dev console. but when inserting it in custom js file, the code fires “cannot read property slideTo of undefined”

  6. I am trying to add slides on the fly, I am fetching the images from an external API and would like to add them as individual slides. Do you know if it’s possible??
    Thanks

  7. Hi Udi
    Please can you create a tutorial about it? isn’t very clear how to apply this in an Elementor carousel…
    Many thanks

  8. Can you supply an example to synchronize two sliders? That is, I have a “before” slider and an “after” slider. Both have same number of images and are set to “loop” with the “slide” effect.

    When you navigate in “before”, the corresponding slide in “after” should appear, and vice-versa. The problem I have found is that when you get to the last slide of the “after” slider, then click the “next” button, the “before” slider does a visual sort of “rewind” — sliding from the other way. Apparently when you use the “slide” effect, slider.js creates three copies of each slide. Even though I use ‘realIndex’ instead of ‘activeIndex’ it still does this rewind effect.

    #slider_before and #slider_after are the ID’s of my Elementor elements.

    // see https://swiperjs.com/api/#methods where we look for the active slide
    function link_slider(which) {
    var before_imageCarousel = jQuery ( ‘#slider_before .swiper-container’ );
    var after_imageCarousel = jQuery ( ‘#slider_after .swiper-container’ );
    var before_swiperInstance = before_imageCarousel.data( ‘swiper’ );
    var after_swiperInstance = after_imageCarousel.data( ‘swiper’ );

    var before_swiper_active_slide = before_swiperInstance.realIndex;
    var after_swiper_active_slide = after_swiperInstance.realIndex;
    // because there are three times as many slides when doing a “slide” effect, you have to divide by 3:
    var howmanyslides = after_swiperInstance.slides.length /3;

    var dominant = before_swiper_active_slide;
    if (which == ‘after’) {
    dominant = after_swiper_active_slide;
    }
    if (dominant >= howmanyslides) {dominant = dominant – howmanyslides;}
    console.log(‘before:’ + before_swiper_active_slide + ‘ after:’ + after_swiper_active_slide + ‘ dominant:’ +dominant + ‘ slides:’ + howmanyslides);
    if (which == ‘before’) { after_swiperInstance.slideToLoop( dominant ); }
    if (which == ‘after’) { before_swiperInstance.slideToLoop( dominant ); }
    }

    jQuery( “.elementor-swiper-button-next” ).wrap( “” );
    jQuery( “.elementor-swiper-button-prev” ).wrap( “” );
    // DOM is ready. Safe to use $:
    // On the slider section, add the ability to make the slider_before click the slider_after at the same time
    jQuery(‘body’).on(‘click’,’#slider_before .outer-elementor-swiper-button-next’, function() {
    link_slider(‘before’);
    return false;
    });

    jQuery(‘body’).on(‘click’,’#slider_before .outer-elementor-swiper-button-prev’,function() {
    link_slider(‘before’);
    return false;
    });

    jQuery(‘body’).on(‘click’, ‘#slider_after .outer-elementor-swiper-button-next’, function() {
    link_slider(‘after’);
    return false;
    });

    jQuery(‘body’).on(‘click’, ‘#slider_after .outer-elementor-swiper-button-prev’, function() {
    link_slider(‘after’);
    return false;
    });

  9. Hi Udi,

    I have a widget that on a regular page in Elementor it works very well but when I put it in the Elementor pop up it does not appear at all. I tried a lot of things including changing code in the widget and it does not help. Do you happen to have an idea to solve the problem please?

    Best Regards,
    David Genish

  10. Hi Udi!

    Great tutorial that helped me a lot to create my own slider navigation.

    You saved my ass today, man. Thanks a lot. 🙂

  11. 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. I had the same issue. After debugging it, i noticed that my js code was executing before the slider was initialised. Delay your custom code either be executing it later, or wrapping it up with a timeout function.

      Hope this helps.

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

  13. Well I make swiper manually like old times,

    ////js

    let el = document.getElementById(‘scroll-swiper’);

    if(el){

    el.classList.add(‘swiper-container’)

    let swiper = new Swiper(‘#scroll-swiper’, {});
    }

  14. `Uncaught TypeError: Cannot read property ‘slideTo’ of undefined`
    Well, I’m not the only one doing something wrong it would appear. I wish someone from Elementor would help us poor folk out. 🙁

  15. After a day of trying I am having to admit defeat – same issue others have mentioned above.

    .data( ‘swiper’) returns an undefined value.

    Inspecting using the console shows that a value is present for the first load after updating the file, and then reverts to undefined – even if the page is just refreshed. Definitely a bug here and I am now looking for an alternative slider that plays nice with Elementor BUT ALSO allows you to access it’s events!

  16. I followed the instructions, they are very clear. JS file is enqueued correctly.
    But I got nothing, just undefined. Is not creating an instance of swiper.

  17. Same problem as earlier comments. I did as instructed and it returns an undefined error. It only works in developer console because is already loaded.

    As per the comment before mine, we need to know the event of when the swiper is initiated.

Leave a Reply

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

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