Question

我在低分辨率的网站上使用iDangerous Swiper。这就是我如何称呼它：

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

因此，当您在桌面浏览器中访问它时，将不会调用swiper。我想要做的是“如果用户将窗口调整为小于resolution的大小”将其打开“，或者如果用户以小窗口大小访问它，则将其销毁，然后将其大小调整为大于{{ 1}}。我试过这个，但它不起作用：

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(); } } });。我不太清楚变量在被调用时如何工作：typeof。

如何“取消”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方法后持续存在，并且只有页面刷新才会消失。在我对两个DIV添加removeAttr()方法调用后，一切都按预期工作。

您的里程可能会有所不同。

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

Answer 3

我遇到了同样的问题并采取了类似的解决方案：

初始化功能：

var mySwiper;

我的调整大小功能：

if(jQuery(window).width() < 672) {
    if (typeof mySwiper == 'undefined') {
        mySwiper = new Swiper('#myId', {
            calculateHeight: true
        });
    }
} else {
    if (typeof mySwiper != 'undefined') {
        // destroy and delete swiper object
        mySwiper.destroy();
        mySwiper = undefined;

        // reset styling for wrapper and slides
        jQuery('.swiper-wrapper').removeAttr('style');
        jQuery('.swiper-slide').removeAttr('style');
    }
}

Answer 4

对于任何仍然遇到问题的人来说，按需销毁和初始化Swiper会尝试稍微延迟调用reInit（）。

在页面加载时定义Swiper参考

var mySwiper;

启动Swiper

// Set Slider 
        mySwiper = new Swiper ('.swiper-container', {loop: true }); 
 // Run Update after 500ms
        setTimeout(function() { mySwiper.reInit(); },500);

Destory Swiper

  if (typeof mySwiper != 'undefined') {  
    mySwiper.destroy();
    mySwiper = undefined;
  }

如果通过ajax更新标记，请确保先清空容器。即：

 if (typeof mySwiper != 'undefined') {  
   mySwiper.destroy();
   mySwiper = undefined;
 }    
 $('#container-with-swiper-markup').html("");

Answer 5

好的，所以我知道我迟到了，但我遇到了类似的问题，最终找到了一个可行的解决方案。

故事：Swiper需要在桌面上运行，但不能在移动设备（小屏幕）上运行，并且应该能够在调整大小时在它们之间进行更改。

要求：在我的示例中，我使用的是jQuery，Swiper和Modernizr（用于媒体查询，因为窗口宽度等不可靠）。

<强>的JavaScript ：

/*! Michael Pumo - Web Development. http://michaelpumo.com */

(function($, Modernizr) {

    'use strict';

    var state = {

        swiper: false,

        setOrGetDevice: function(device) {

            if (typeof(device) === 'undefined') {
                var mq = Modernizr.mq('only screen and (min-width: 768px)') ? 'desktop' : 'mobile';
                device = mq;
            }

            return device;

        },

        device: function() {

            return state.setOrGetDevice();

        }

    };

    var cache = {

        $window: $(window),
        $swiper: $('.swiper-container'),
        $swiperElements: $('.swiper-container, .swiper-wrapper, .swiper-slide')

    };

    var swiper;

    var app = {

        init: function() {

            app.swiper();

        },

        swiper: function() {

            if(state.device() === 'desktop' && !state.swiper) {

                swiper = cache.$swiper.swiper({
                    parallax: false,
                    initialSlide: 0,
                    direction: 'horizontal',
                    loop: true,
                    autoplay: 3000,
                    speed: 1000
                });

                state.swiper = true;

            } else if(state.device() === 'mobile' && state.swiper) {

                swiper.destroy();
                swiper = undefined;
                cache.$swiperElements.removeAttr('style');

                state.swiper = false;

            }

        }

    };

    $(function() {
        app.init();
    });

    cache.$window.on('resize', function() {

        var mq = Modernizr.mq('only screen and (min-width: 768px)') ? 'desktop' : 'mobile';
        state.setOrGetDevice(mq);
        app.init();

    });

})(window.jQuery, window.Modernizr);

除了检查'设备'（换句话说，移动大小或桌面大小），它还会检查我在state.swiper中设置的标记。由于这是移动优先方法，因此该标志最初设置为false。

我知道我的解释很简短，但是这样可以100％正常工作，并且由于旗帜的原因，它可以在调整大小的每个阶段都不会初始化Swiper。

HTML 只是Swiper要求的标准 HTML ，因此，如果您使用此解决方案，那么您应该使用它。

希望它对某人有所帮助。

谢谢， MIKEY。

Answer 6

我有一个更好的解决方案，由http://idangero.us

给出

var mySwiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true
})
if (window.innerWidth > 767) {
    swiper.detachEvents();
}

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

6 个答案: