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>

Possible duplicate of [JQuery: How to call RESIZE event only once it's FINISHED resizing?](https://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing) — Feras Al Sous, Jun 17 '19 at 10:09

score 0 · Answer 1 · answered Jun 17 '19 at 10:09

0

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.
}

answered Jun 17 '19 at 10:09

Dylan Ang

175
7

Omid Nikrah · Answer 2 · 2019-06-17T10:20:02.403

0

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);

edited Jun 17 '19 at 10:20

answered Jun 17 '19 at 10:12

Omid Nikrah

2,444
3
15
30

It didn't work before your edit, the event attaching was off. – Teemu Jun 17 '19 at 10:18
Hi, Thanks for the fast reply, I tested the above and I still need to manually refresh the page for the changes to work, I was aiming for the slick slider to auto change if a user resized the browser window. – Jimbob21uk Jun 17 '19 at 10:33
@Jimbob21uk maybe it's a slick issue! if you write a console.log in slickSlider function, you see it's log in every resize. – Omid Nikrah Jun 17 '19 at 10:35
@Jimbob21uk You should use the responsive option of the slick slider. – Omid Nikrah Jun 17 '19 at 10:38

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

2 Answers2