我在低分辨率下使用
iDangerous Swiper作为我的网站.这是我如何称呼它：
var resolution = 670;
if ($(window).width() < resolution) {
var mySwiper = $('.swiper-container').swiper({
mode:'horizontal',loop: true,grabCursor: true,paginationClickable: true
});
因此,当您在桌面浏览器中访问它时,将不会调用滑动器.我想要做的是“如果用户将窗口大小调整为小于分辨率的大小,则将其打开”或者如果用户以小窗口大小访问窗口然后将其大小调整为大于分辨率,则将其销毁.我试过这个,但它不起作用：
$(window).resize(function(){
if ($(window).width() < resolution) {
if(typeof(mySwiper) === "undefined" ) {
var mySwiper = $('.swiper-container').swiper({
mode:'horizontal',paginationClickable: true
});
}
} else {
if (typeof(mySwiper) !== "undefined" ) {
mySwiper.destroy();
}
}
});
发生两件令人不快的事
>如果用户的分辨率很小,并将其调整为仍然调用狙击手的分辨率,则会重新启动狙击手.
>如果用户处于较小的分辨率并将其调整为更大的分辨率,则不会被破坏.
我的问题是我的问题类型.当我们这样调用变量时,我不知道变量是如何工作的：$(‘.swiper-container’).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();
});
而且它太棒了！
