In elementor page builder this is how I initialise swiper js
var options = {
// my swiper options
};
const asyncSwiper = elementorFrontend.utils.swiper;
new asyncSwiper('.tpslider', options).then((newSwiperInstance) => {
var swiper = newSwiperInstance;
});
console.log(swiper); // returns undefined
How can I access swiper variable now ?
This worked for me.
jQuery( window ).on( 'elementor/frontend/init', () => {
var swiperElement = '#swiperContainer'
var swiperConfig = {
slidesPerView: 2,
spaceBetween: 30,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
}
//then use the code
if ( 'undefined' === typeof Swiper ) {
const asyncSwiper = elementorFrontend.utils.swiper;
new asyncSwiper( swiperElement, swiperConfig ).then( ( newSwiperInstance ) => {
console.log( 'New Swiper instance is ready: ', newSwiperInstance );
mySwiper = newSwiperInstance;
} );
} else {
console.log( 'Swiper global variable is ready, create a new instance: ', Swiper );
mySwiper = new Swiper( swiperElement, swiperConfig );
}
});
Make sure to follow how-to load your widgets as well. https://developers.elementor.com/add-javascript-to-elementor-widgets/
If you want to sync main slider to thumbs, you can do this:
var sliderContainer = $scope.find('.main-slider');
var sliderSettings = {
...
};
var thumbsContainer = $scope.find('.thumbs-slider');
var thumbsSettings = {
...
};
if ( 'undefined' === typeof Swiper ) {
const asyncSwiper = elementorFrontend.utils.swiper;
new asyncSwiper( thumbsContainer, thumbsSettings ).then( ( newSwiperThumbsInstance ) => {
var swiperThumbs = newSwiperThumbsInstance;
sliderSettings["thumbs"] = { swiper: swiperThumbs };
new asyncSwiper( sliderContainer, sliderSettings ).then( ( newSwiperSliderInstance ) => {
var swiperSlider = newSwiperSliderInstance;
} );
} );
}
else {
var swiperThumbs = new Swiper(thumbsContainer, thumbsSettings);
sliderSettings["thumbs"] = { swiper: swiperThumbs };
var swiper = new Swiper(sliderContainer, sliderSettings);
}