异步方法中的刷js同步滑块
异步方法中的刷js同步滑块
提问于 2022-01-20 17:54:16
在元素或页面构建器中，我就是这样初始化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 现在如何访问swiper变量？
回答 2
Stack Overflow用户
发布于 2022-07-01 03:49:06
这对我有用。
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 );
}
});确保遵循如何加载您的小部件以及。https://developers.elementor.com/add-javascript-to-elementor-widgets/
Stack Overflow用户
发布于 2022-09-20 07:38:40
如果要将主滑块与拇指同步，可以这样做：
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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70791119
复制相关文章
相似问题
腾讯云开发者
