include media queries in javascript

Question

I have the following jQuery code:

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

I am trying to add a media query so that the slidesToShow changes from 1 on mobile to 4 on desktop.

I have tried the following code:

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

But it doesn't seem to work, does any body have any ideas where I am going wrong?

Answer 1

You can check the $(window).width() if you really want to achieve it in javascript code. The code can be as follows:

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

But at the same time you will have think about screen rotation event too. Because in some devices it may possible that portrait screen size is less than 1024 and landscape have greater than this limit.