gpt4 book ai didi

jquery - 如果窗口大小调整为更大的分辨率,则销毁 iDangerous Swiper 或在调整大小为更小的分辨率时调用它

转载 作者:行者123 更新时间:2023-12-03 22:14:16 30 4
gpt4 key购买 nike

我正在使用iDangerous Swiper对于我的网站,分辨率较低。我是这样调用它的:

var resolution = 670;
if ($(window).width() < resolution) {
var mySwiper = $('.swiper-container').swiper({
mode:'horizontal',
loop: true,
grabCursor: true,
paginationClickable: true
});

所以,当你在桌面浏览器中访问它时,swiper将不会被调用。我想要做的是,如果用户将窗口大小调整为小于分辨率,则“打开它”;或者如果用户在小窗口大小中访问它,然后将其调整为更大,则销毁它比分辨率。我尝试了这个,但没有成功:

$(window).resize(function(){
if ($(window).width() < resolution) {
if(typeof(mySwiper) === "undefined" ) {
var mySwiper = $('.swiper-container').swiper({
mode:'horizontal',
loop: true,
grabCursor: true,
paginationClickable: true
});
}
} else {
if (typeof(mySwiper) !== "undefined" ) {
mySwiper.destroy();
}
}
});

发生了两件不受欢迎的事情:

  1. 如果用户使用较小的分辨率并将其大小调整为仍然调用滑动器的分辨率,则会重新启动滑动器。
  2. 如果用户使用较小的分辨率并将其调整为较大的分辨率,则不会被破坏。

我认为我的问题是typeof。我不太了解变量在这样调用时如何工作: $('.swiper-container').swiper().

我如何“取消调用”swiper,如果它已经被调用,如何不调用它?

最佳答案

我的解决方案:

var mySwiper = undefined;
function initSwiper() {
var screenWidth = $(window).width();
if(screenWidth < 992 && mySwiper == undefined) {
mySwiper = new Swiper('.swiper-container', {
spaceBetween: 0,
freeMode: true
});
} else if (screenWidth > 991 && mySwiper != undefined) {
mySwiper.destroy();
mySwiper = undefined;
jQuery('.swiper-wrapper').removeAttr('style');
jQuery('.swiper-slide').removeAttr('style');
}
}

//Swiper plugin initialization
initSwiper();

//Swiper plugin initialization on window resize
$(window).on('resize', function(){
initSwiper();
});

而且它有效! :)

关于jquery - 如果窗口大小调整为更大的分辨率,则销毁 iDangerous Swiper 或在调整大小为更小的分辨率时调用它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21538056/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com