CODEWITHSUNDEEP
javascript
Abby
Abby

Reputation: 31

How do you use media queries in javascript?

I'm building a carousel that uses javascript. For the desktop version, it shows 3 posts in the slider. However, I would like to put a media query on the slider so that it only displays one post at a time for the mobile version because the screen is smaller.

I found this: 

<script>
function myFunction(x) {
  if (x.matches) { // If media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
   document.body.style.backgroundColor = "pink";
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
</script>

But I want to use this in there:

$('.post-wrapper').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 3000,
  nextArrow: $('.next'),
  prevArrow: $('.prev'),

});

Instead of changing the background colours. How do I add mine to it?

Thank you in advance for your answers :)

Upvotes: 1

Views: 147

Answers (3)

Marked as Duplicate
Marked as Duplicate

Reputation: 1259

function myFunction(x) {
  var slides = x.matches ? 1 : 3;
  $('.post-wrapper').slick('slickSetOption', 'slidesToShow', slides, true);
}

$('.post-wrapper').slick({
  // .. set the initial values
});

var x = window.matchMedia("(max-width: 700px)");
myFunction(x);
x.addListener(myFunction);

You can use slickSetOption to dynamically edit the carousel.

Upvotes: 1

Raul
Raul

Reputation: 623

Just create your media queries with css, and then append the classes you want when a condition is met in your JS.

Upvotes: 1

Mohammad Zubair
Mohammad Zubair

Reputation: 413

If Using slick carousel just go through API reference first https://react-slick.neostack.com/docs/api/

Upvotes: 3

Related Questions