12

我正在以较低的分辨率为我的网站使用iDangerous Swiper 。我是这样称呼它的：

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

因此，当您在桌面浏览器中访问它时，不会调用 swiper。我想要做的是“打开它”如果用户将窗口大小调整为小于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. 如果用户处于小分辨率并将其调整为仍调用 swiper 的分辨率，它会重新启动 swiper。
  2. 如果用户使用小分辨率并将其调整为更大的分辨率，则它不会被破坏。

我的问题是typeof。当像这样调用变量时，我不太了解变量是如何工作的：$('.swiper-container').swiper()。

我如何“取消呼叫” swiper，如果它已经被调用，如何不调用它？

4

6 回答 6

17

我的解决方案：

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

它工作！:)

于 2015-04-29T08:16:16.790 回答
2

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

初始化函数：

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');
    }
}
于 2014-09-22T07:02:48.797 回答
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');
    }
});
于 2014-03-25T22:26:06.283 回答
2

对于仍然在按需销毁和初始化 Swiper 时遇到问题的任何人，请尝试稍微延迟调用 reInit()。

在页面加载时定义 Swiper 参考

var mySwiper;

开始刷卡器

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

破坏掠夺者

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

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

 if (typeof mySwiper != 'undefined') {  
   mySwiper.destroy();
   mySwiper = undefined;
 }    
 $('#container-with-swiper-markup').html("");
于 2015-02-12T13:43:31.780 回答
1

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

故事：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，因此如果您使用此解决方案，您应该使用它。

希望它可以对某人有所帮助。

谢谢，米奇。

于 2015-04-17T21:27:09.427 回答
0

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


var mySwiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true
})
if (window.innerWidth > 767) {
    swiper.detachEvents();
}
于 2017-09-19T09:21:36.057 回答