I'm using the slides widget of Elementor Pro which is based on swiper.js and want to make use of the slideTo() function which the swiper offers to slide to a certain slide. I could not find a way to address the slider with javascript. I tried to add something like

$('.btn').on('click', function() {
mySwiper.slideTo(2)
});

or

$('.btn').on('click', function() {
mySwiper[0].slideTo(2); // in case there is more than one swiper element
});

But that did not work, since I could not identify the slider.

Analysising Elementor's frontend.js I still could not find out how the swiper instances are called within the plugin. Has anyone managed to managed a way to call swiper sliders that e from Elementor?

Thanks in advance.

The question probably can also be related to this question Identify Reference to Destroy & Re-Initialize Swiper in Elementor

I'm using the slides widget of Elementor Pro which is based on swiper.js and want to make use of the slideTo() function which the swiper offers to slide to a certain slide. I could not find a way to address the slider with javascript. I tried to add something like

$('.btn').on('click', function() {
mySwiper.slideTo(2)
});

or

$('.btn').on('click', function() {
mySwiper[0].slideTo(2); // in case there is more than one swiper element
});

But that did not work, since I could not identify the slider.

Analysising Elementor's frontend.js I still could not find out how the swiper instances are called within the plugin. Has anyone managed to managed a way to call swiper sliders that e from Elementor?

Thanks in advance.

The question probably can also be related to this question Identify Reference to Destroy & Re-Initialize Swiper in Elementor

• javascript
• jquery
• wordpress
• swiper.js
• elementor

2 Answers 2

The code above didn't work for me, because I used the 'AE-elementor Post Blocks' to show woomerce products as a slider. It helped me along the way tough, so i'll post my solution here for those who arent sliding pictures, but post trough 'AE Post Blocks'

The code above returned a null, so i couldn't reach my slider. This is how I eventually did:

var mySwiper = new Swiper ('#slider1 .swiper-container');
mySwiper.slideTo(2);

In some cases it is possible that the script of the slider is overwriting your custom code, because it is added later on. That was the case in my project, so I've put a little delay on the script.

setTimeout( function(){ 
        var mySwiper = new Swiper ('#gr-week-swipe .swiper-container');
        mySwiper.slideTo(2);
}  , 500 );    

Now its working fine. Thanks @AlanRezende, your code helped me along the way!

You can give an ID to the Elementor widget ex: slider1 and then with JS you can use:

var sliderInstance = document.querySelector('#slider1 .swiper-container').swiper;

After this you can call sliderInstance.slideTo(2) wherever you want.