12

低解像度でウェブサイトに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();
        }
    }
});

2 つの望ましくないことが起こります。

  1. ユーザーの解像度が小さく、スワイパーを呼び出す解像度にサイズ変更すると、スワイパーが再起動します。
  2. ユーザーが小さい解像度を使用していて、大きい解像度にサイズ変更した場合、それは破棄されません。

私の問題はtypeof. 変数が次のように呼び出されたときにどのように機能するかはよくわかりません: $('.swiper-container').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

オンデマンドで 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 を使用してマークアップを更新する場合は、最初にコンテナーを空にしてください。すなわち:

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

私は同じ問題を抱えていて、幅が最大幅を超えるとすぐに mySwiper が再びあったundefinedため、if(typeof)ステートメントは常にfalse.

fired[]以下の配列を使用した別のハイブリッドソリューションを見つけました。またdestroy()、私の例ではメソッドが実行されている可能性がありますが、swiper 自体がスタイル属性をラッパーに追加し、destroy メソッドが呼び出された後も保持されていた DIV をスライドさせていたことにも気付きました。ページの更新で。removeAttr()2 つの 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');
    }
});
于 2014-03-25T22:26:06.283 に答える
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 に答える
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 に答える