包括在JavaScript

Question

，我有以下的jQuery代碼媒體查詢：

jQuery('.slider-home').slick({ 
slidesToShow: 4, 
slidesToScroll: 1, 
asNavFor: '.slider-for, .slider-arrow', 
focusOnSelect: true, 
autoplay: false, 
arrows: true 
}); 

我想，這樣的slidesToShow從1移動變爲4在桌面上添加一個媒體查詢。

我曾嘗試下面的代碼：

if (matchMedia('only screen and (max-width: 1024px)').matches) { 
jQuery('.slider-home').slick({ 
slidesToShow: 1 
}); 
} else { 
jQuery('.slider-home').slick({ 
slidesToShow: 4 
}); 

但它似乎沒有工作，沒有任何機構有任何想法，我要去的地方錯了嗎？

Answer 1

如果你真的想在javascript代碼中實現它，你可以檢查$(window).width()。代碼可以如下：

var windowWidth = $(window).width(); 
if(windowWidth < 1024) 
{ 
    jQuery('.slider-home').slick({ 
     slidesToShow: 1 
    }); 
} 
else { 
    jQuery('.slider-home').slick({ 
     slidesToShow: 4 
    }); 
} 

但是同時你也會考慮屏幕旋轉事件。因爲在某些設備中，有可能portrait的屏幕尺寸小於1024和landscape的尺寸大於此限制。