Different animation when the size changes

Asked Sep 01 '20 at 13:47

Active Sep 01 '20 at 13:50

Viewed 21 times

I need the the animation to change based on the screen size.

$(document).ready(function() {
  if ($(window).width() <= 900) {
    $(".slider").slick({
      centerMode: true,
      slidesToShow: 1,
    });
  } else {
    $(".slider").slick({
      centerMode: true,
      slidesToShow: 3,
    });
  }
});

The above code only works when I reload the page. I want it to change as the screen size changes without the need of reloading. Can you help me?

edited Sep 01 '20 at 13:50

Mr. Polywhirl

42,981
12
84
132

asked Sep 01 '20 at 13:47

Shishir

so add resize event handler, hopefully slick can handle the change – epascarello Sep 01 '20 at 13:49
[resize](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event) – JavaScript Sep 01 '20 at 13:49
Use [media queries programmatically via `MediaQueryList.addListener`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener). – Heretic Monkey Sep 01 '20 at 13:51

Different animation when the size changes

0 Answers0