根據瀏覽器寬度打開/關閉jQuery調用熱門

我有一個基於Wordpress的響應式網站，我想根據瀏覽器窗口寬度調用Swiper。所以我寫了這一點：根據瀏覽器寬度打開/關閉jQuery調用熱門

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

它工作得很好，但如果用戶調整窗口大小，網站變得有點凌亂。

所以，我寫了所有這一切都發生了$(window).resize。它的工作，但有兩個不想要的事情發生了：

當用戶在< browserwidth啓動瀏覽器並調整窗口大小高達browserwidth，它一直重裝組隊，探索，它只是不是很酷。
當用戶啓動瀏覽器< browserwidth並將窗口大小調整到browserwidth以外時，即使使用現有的mySwiper.destroy()函數，Swiper也不會「關閉」。

那麼，如何打開/關閉jQuery調用或檢測它被調用並銷燬它？

來源

2014-02-08 fksr86

看起來你應該使用CSS媒體查詢，而不是 –

創建函數，只有當圖像越過/給定的寬度下觸發一次，並且創建和銷燬的刷卡相應

jQuery(function($) { 
    var fired = [false, false], 
     mySwiper; 

    $(window).on('resize', function() { 
     if ($(this).width() > 670 && !fired[0]) { 
      fired[0] = true; 
      fired[1] = false; 
      mySwiper = $('.swiper-container').swiper({ 
       mode:'horizontal', 
       loop: true, 
       grabCursor: true, 
       paginationClickable: true 
      }); 
     }else if ($(this).width() < 670 && !fired[1]) { 
      fired[0] = false; 
      fired[1] = true; 
      mySwiper.destroy(); 
     } 
    }); 
});

來源

2014-02-08 15:49:49 adeneo

謝謝！這工作像一個魅力。除了當調用mySwiper.destroy（）時它會顯示一個錯誤：未捕獲的TypeError：無法讀取未定義的屬性長度。我已經在其他上下文中測試了'destroy'動作，並且它以相同的錯誤結束。也許這是一個Swiper問題。我會試圖找出造成它的原因。 – fksr86

@ fksr86如你所說，它顯示一個錯誤。解決方案是檢查swiper typeof是否未定義。我將代碼示例放在下面的新答案中。 – Heisenberg

只是使swiper-container的寬度是基於百分比和插件將它撿起來，對自己的反應..

您可能需要添加選項calculateHeight:true

來源

2014-02-08 15:34:32

文檔顯示有一個resizeReInit選項，它會自動重新初始化$（window）.resize上的滑塊。你可以使用這個，而不是編寫自己的resize事件。

在查看文檔時，它看起來不像支持任何形式的禁用或銷燬，這很奇怪。當瀏覽器寬度不符合要求時，您可能必須手動隱藏/刪除並顯示/創建。

來源

2014-02-08 15:37:13 Bic

的解決方案是檢查刷卡的typeof是或不是未定義。

// SWIPER 
    var mySwiper; 
    var browserwidth = 670; 
    $(window).on('resize', function() { 
    if ($(window).width() < browserwidth) { 
     if (typeof mySwiper == 'undefined') { 
     mySwiper = $('.swiper-container').swiper({ 
      mode:'horizontal', 
      loop: true, 
      grabCursor: true, 
      paginationClickable: true 
     }); 
     } 
    }else ($(window).width() >= browserwidth) { 
     if (typeof mySwiper != 'undefined') { 
     // destroy and delete swiper object 
     mySwiper.destroy(); 
     mySwiper = undefined; 
     // reset styling for wrapper and slides 
     $('.swiper-wrapper').removeAttr('style'); 
     $('.swiper-slide').removeAttr('style'); 
     } 
    } 
    })

來源

2015-02-05 10:01:08 Heisenberg

根據瀏覽器寬度打開/關閉jQuery調用熱門

回答

相關問題