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.
75 Responses
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
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?
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
https://re-box.io/investieren-2/
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
Hello, I am using this swiper to run a vertical slider with mouseswheel in one section and continue my scroll on the page but the slider stops on the 2nd slider, I cannot scroll on the next one. you can help me?
Example: http://gd-02.dhdinc.org/contacto/
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!
Doesn’t work.
this works with dev console. but when inserting it in custom js file, the code fires “cannot read property slideTo of undefined”
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
Hi Stefano,
I am also trying to bind images from an external API but could not find anything, did you find any solution to this problem?
Hi Udi
Please can you create a tutorial about it? isn’t very clear how to apply this in an Elementor carousel…
Many thanks
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;
});
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
Hi Udi!
Great tutorial that helped me a lot to create my own slider navigation.
You saved my ass today, man. Thanks a lot. 🙂
How can I deque/deregister swiper?
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.
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!
I got the same:
Cannot read property ‘slideTo’ of undefined
Hello,
In my case, this thread resolve the problem : https://github.com/elementor/elementor/issues/11067#issuecomment-613521991
It seems important to “waits for elementor and pro to load” before using the API.
Doesn’t seem to work anymore.
the swiperInstance is undefined for sure!! tested it. does not work
True!
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.
The normal swiper banner I wrote will make the Counter-number to the WordPress elementor editor not work properly
it adds an extra request in page speed results.
What event should I use to get when elementor has initiated swiper?
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’, {});
}
use this:
const swiper = document.querySelector(‘ .swiper-container’).swiper;
swiper.slideNext();
Bang on mate, Legend
Need proper guide with example this is not clear. Please Create a proper guide like WordPress.
`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. 🙁
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!
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.
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.
https://github.com/elementor/elementor/issues/13268
how can i change the hover color of Image Carsouel Dot??
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 ?
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):”
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.
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 🙂
Is it possible to create a vertical slider with that?
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
//jquery
$(window).on(‘load’, function(){
//get your swiper instance mentioned in the article.
});
Can u give a complete example ?
please
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_target.data('swiper');
swiperInstance.slideTo(2);
});
});
Thanks!
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?
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 — ?
Does anyone know how to add custom prev/next buttons?
$( window ).load( function() {
var imageCarousel = $( ‘#carousel .swiper’ );
var swiperInstance = imageCarousel.data( ‘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.
King Grizzyly made an excellent video specifically for this: https://www.youtube.com/watch?v=nEaAEHhdmcE
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”
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_target.data(‘swiper’);
console.log(swiperInstance);
swiperInstance.params.centeredSlides = true;
swiperInstance.update();
});
thanks it worked for a moment then it started not finding the instance anymore…
Big thanks, Bravo. Your code worked for me, and it saves a lot of my time.
Dude ! You saved the day!! Thanks.
THANK YOU!!!
How to access the swiper instance when using the container layout? Seems like the .data(‘swiper’) is not there anymore?
If nothing is working to get the swiper instance you can find solutions with setTimeout and observer here: https://stackoverflow.com/questions/76343415/swiper-instance-not-yet-available-on-window-load/76514537
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 = the_swiper.data(‘swiper’);
swiperInstance.slideTo(3);
Make this one change and everything will work:
const imageCarousel = jQuery(‘#swiper-wrapper-0e0394224dfd718e’).parent();
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?
Is not working anymore
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 = imageCarousel.data( ‘swiper’ );
swiperInstance.releaseOnEdges = true;
swiperInstance.update();
});
});
Just gives
Uncaught TypeError: Cannot read properties of undefined (reading ‘releaseOnEdges’)
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.
thanks!
Jessa
Hi,
i read you comment about the swiper.js and i wonder if you have found a solution yet. Because i have the same problem…
thanks and regards
Sebastian
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
Thanks
Did anybody find a solution for this yet?
Hi,
Does anybody know how to get the slider image to change to the next image upon hover?
Any help would be appreciated.
Thanks in advance
I am using the Slides module and wanted to sync the slides with an external element that changes when the slide changes. I tried several iterations of the suggestions above with no luck.
I found a solution that worked for me here: https://stackoverflow.com/a/76514537
Uses an observer:
function Observer(o, property){
var _this = this;
var value = o[property];
this.observers = [];
this.Observe = function (notifyCallback){
_this.observers.push(notifyCallback);
}
Object.defineProperty(o, property, {
set: function(val){
_this.value = val;
for(var i = 0; i < _this.observers.length; i++) _this.observers[i](val);
},
get: function(){
return _this.value;
}
});
}
Then you can access the swiper instance like this:
const swiperTarget = document.querySelector('.swiper');
var observer = new Observer(swiperTarget, 'swiper');
observer.Observe(function(newValue){
const swiperNeigh = newValue;
if (swiperNeigh) {
swiperNeigh.on('slideChange', function () {
console.log(this.realIndex);
// on slideChange functions
});
}
});
I don’t understand why @UdiDollberg hasn’t revisited this article as Swiper JS API has clearly NOT been exposed in Elementor as nothing literally works from Swiper API in Elementor.
I have this “error message” in google pagespeed in the “Largest Contentful Paint-Element” section:
div.elementor-slides-wrapper > div#swiper-wrapper-366b7e22f5146bdc > div.elementor-repeater-item-357e63c > div.swiper-slide-bg
What can I do to improve this?
Thanks!
Hello,
I’m trying to change the slide effect but nothing has been working for me: the predetermined effect is a swipe effect but i need it to be a fade effect.
Does anyone know how i can change it? Thank you
I have the same problem, did you find a way to do it?
This doesn’t seem to work any more, swiper is not available on any element
I’ve solved it by changing the selector class from ‘swiper-container’ to just ‘swiper’.
Also note that the first slide is number 1 and not 0.
My working code looks like this:
const imageCarousel = jQuery ( ‘#my-id .swiper’ ),
swiperInstance = imageCarousel.data( ‘swiper’ );
swiperInstance.slideTo( 1 );
Changing
imageCarousel.data(‘swiper-container’)
to
imageCarousel.data(‘swiper’);
also was the fix for me.
Thanks!
Hi Udi, how can I enable freemode for a loop carousel widget? Thank you!