browser resize runs function again, how do i do this?

Question

How can I call this function again once a user resizes their browser?

<script type="text/javascript">

    var x = window.matchMedia("(min-width: 1150px)")

  if (x.matches) { 
        $(document).on('ready', function() {

       $(".regular").slick({                 
        dots: true,
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: true,
        utoplaySpeed: 5000
       });
      });

  } else {
        $(document).on('ready', function() {

       $(".regular").slick({                  
        dots: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        utoplaySpeed: 5000,
        centerMode: true
      });
    });
  }


</script>

Answer 1

You can try put your script into a function, and call that function when window.onresize happens.

window.onresize = doStuffYouWant;

function doStuffYouWant() {
    // put your code inside here.
}

Answer 2

You should rewrite your code like the following:

var slickSlider = function() {
  var x = window.matchMedia("(min-width: 1150px)");
  if (x.matches) {
    $(".regular").slick({
      dots: true,
      infinite: true,
      slidesToShow: 4,
      slidesToScroll: 1,
      autoplay: true,
      utoplaySpeed: 5000
    });
  } else {
    $(".regular").slick({
      dots: true,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      utoplaySpeed: 5000,
      centerMode: true
    });
  }
};

$(function() {
  slickSlider();
});

$(window).resize(slickSlider);