web-dev-qa-db-ja.com

ウィンドウのサイズが大きい解像度に変更された場合はiDangerousSwiperを破棄するか、小さい解像度にサイズ変更された場合は呼び出します

私は低解像度の私のウェブサイトに 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()のように呼び出されたときに、変数がどのように機能するかはよくわかりません。

スワイパーを「呼び出す」方法と、すでに呼び出されている場合は呼び出さない方法を教えてください。

jqueryswiper
11
fksr86

私の解決策：

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

そしてそれはworx！ :)

12
user2048176

Swiperをオンデマンドで破棄して初期化するのにまだ問題がある場合は、少し遅れてreInit（）を呼び出してみてください。

ページの読み込み時にスワイパー参照を定義する

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("");
2
David D

同じ問題が発生し、幅が最大幅を超えるとすぐにmySwiperが再びundefinedになり、if(typeof)ステートメントが常にfalseを返すことがわかりました。

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

私は同じ問題を抱えていて、同様の解決策を取りました：

init関数：

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');
    }
}
2
georg

さて、私はパーティーに遅れていることを知っていますが、私は同様の問題を抱えていて、しっかりと機能する解決策に行き着きました。

ストーリー：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 [〜＃〜]であるため、これが必要です。このソリューションを使用する場合は、を使用する必要があります。

それが誰かの助けになることを願っています。

ありがとう、マイキー。

1
Michael Giovanni Pumo

http://idangero.us によって与えられたより良い解決策があります


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