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

Question

我在我的网站上使用iDangerous Swiper以较低的分辨率.这是我如何称呼它:

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

因此,当您在桌面浏览器中访问它时,将不会调用滑动器.我想要做的是"如果用户将窗口大小调整到小于resolution或者破坏它,如果用户以小窗口大小访问它,然后将其大小调整为大于",则"打开" resolution.我试过这个,但它不起作用:

$(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以及如果已经调用它怎么不调用？

Answer 1

我的解决方案

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();        
});

而且它太棒了!:)

Answer 2

我遇到了同样的问题，发现一旦宽度超出我的最大宽度， mySwiper 就会再次出现undefined，因此该if(typeof)语句总是返回false。

我找到了另一个带有fired[]下面数组的混合解决方案，并且还意识到，虽然该destroy()方法可能在我的示例中执行，但 swiper 本身已向包装器和幻灯片 DIV 添加了一个样式属性，该属性在调用 destroy 方法后仍然存在，并且仅消失随着页面刷新。在我removeAttr()在两个 DIV 上添加方法调用后，一切都按预期工作。

你的旅费可能会改变。

$(window).on('resize', function ()
{
    if ($(this).width() <= 383 && !fired[0])
    {
        fired[0] = true;
        fired[1] = false;

        mySwiper = $('.swiper-container').swiper({ mode: 'horizontal', loop: false, wrapperClass: 'swiper-wrapper', slideClass: 'swiper-slide' });
    }
    else if ($(this).width() >= 384 && !fired[1])
    {
        fired[0] = false;
        fired[1] = true;

        mySwiper.destroy();

        $('.swiper-wrapper').removeAttr('style');
        $('.swiper-slide').removeAttr('style');
    }
});