All Swiper.js Instances in Elementor are Now Exposed

Cover image

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 = '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 = '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.


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

63 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?

    1. Hi @Udi Dollberg,

      I have a issue I ma using media carousel in popup and I am using 5,6 popups in a single page and all popups have media course slider and all have different content but issue is first popup is showing properly media carousel and other all or glitching it seems js is not loading for all popups media carousel I deactivated all plugins but still we have issue please test and and release quick update version Thank you

  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 = ‘swiper’ );
    swiperInstance.slideTo( 0 );

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


  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 );


  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??

  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 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 = ‘swiper’ );
    var after_swiperInstance = ‘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() {
    return false;

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

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

    jQuery(‘body’).on(‘click’, ‘#slider_after .outer-elementor-swiper-button-prev’, function() {
    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,


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



    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.

  18. Hello,
    I’m surprised widget doesn’t have an option to reverse slider direction.

    This is something very common on websites and it was possible before with slick slider.

    Is there any way to do this please ?

  19. Which Javascript file you guys are talking about? Where is it located?

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

    1. Hi Raul,
      “Your javascript file” refers to a JS file that you include in your Elementor theme/plugin, that contains the code that you are using to modify the Swiper instance.

  20. Hey, i’m trying to translate the aria-label “Previous slide” and “Next slide”.
    i put this snippet but it’s not working:
    $(‘.elementor-swiper-button-prev’).attr(‘aria-label’, ‘לתמונה הקודמת’);
    $(‘.elementor-swiper-button-next’).attr(‘aria-label’, ‘לתמונה הבא’);

    Any idea why it’s not working? thanks 🙂

  21. For those who get undefined on the page reload after updating code into the project.

    it doesn’t work inside $(document).ready since elementor swiper takes milliseconds to init. but here is the solution,

    you can wrap it with the window load function to make it work

    $(window).on(‘load’, function(){
    //get your swiper instance mentioned in the article.

  22. For anyone struggling to get it to work fundamentally:

    jQuery(document).ready(function($) {
    $(window).on('load', function () {
    const swiper_target = jQuery ( '#myslider .swiper-container' );
    const swiperInstance ='swiper');

  23. I’m trying to change the pagination to dynamic bullets however I can’t really figure this out. Any “success” with it tends to show the bullets but then they don’t change when you swipe. Any ideas?

  24. Hey! I was wondering, can I move the Elementor image slider with my custom located arrows?

    What’s the protocol there? Just initiate the swiper instance and access the icons via css class and move the imageCarousel ++ and — ?

  25. Does anyone know how to add custom prev/next buttons?

    $( window ).load( function() {
    var imageCarousel = $( ‘#carousel .swiper’ );
    var swiperInstance = ‘swiper’ );

    swiperInstance.navigation.nextEl = “.slide-next”;
    swiperInstance.navigation.prevEl = “.slide-prev”;

    This does not work and I can’t seem to figure out how to get it working.

    1. King Grizzyly made an excellent video specifically for this:

      Pay attention to Ross Baker in the comment section April 2023
      “I had the same issue and it is because of the ‘Upgrade Swiper Library’ experiment but to fix it, just change .swiper-container to .swiper they updated the markup between v5.36 and v8.45”

  26. update April 2023 – it seems “swiper-container” is not in use anymore.

    this is the code that worked for me:

    jQuery(window).on(‘load’, function () {
    const swiper_target = jQuery ( ‘#center-mode-products .swiper’ );
    const swiperInstance =‘swiper’);
    swiperInstance.params.centeredSlides = true;

  27. How to access the swiper instance when using the container layout? Seems like the .data(‘swiper’) is not there anymore?

  28. The html structure of the swiper has changed (probably due to the use of Flex containers). Now, the swiper container is the parent element to the Swiper ID element. Therefore the Javascript has to change to this:

    const imageCarousel = jQuery ( ‘#my-id .swiper-container’ ).parent();
    const swiperInstance =‘swiper’);

  29. Make this one change and everything will work:

    const imageCarousel = jQuery(‘#swiper-wrapper-0e0394224dfd718e’).parent();

  30. So can we change paramenters like Mousewheel control.
    I need to be able to set the parameter ‘releaseOnEdges’ to ‘true’, no idea how to chnage this though.

    Anyone have any idea?

  31. It seems that you cant use swiper.js parameters with this solution, I’m trying to implement releaseOnEdges = TRUE but no matter how many different solutions I’ve found from here to GitHub absolutely nothing seems to work, I just get constant errors in the console.

    jQuery(document).ready(function($) {
    $(window).on(‘load’, function () {
    const imageCarousel = jQuery ( ‘#my-island-carousel .swiper’ ),
    swiperInstance = ‘swiper’ );
    swiperInstance.releaseOnEdges = true;

    Just gives

    Uncaught TypeError: Cannot read properties of undefined (reading ‘releaseOnEdges’)

  32. Hi @Udi,

    is there any update on the correct initialization for the Swiper instance?

    I agree with Chris’ comment that even from Github’s or here, nothing seems to work anymore.

    We’d appreciate if you can give an update on this article regarding the Swiper instance.



  33. Thanks for your guide.
    But when I Upgrade Swiper Library in the settings of Elementor then It is error.

    Please update guide for Swiper version 8


Leave a Reply

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