Note: This is my first time asking a question on here.

I have built a logo slider (with 2 breakpoints) using Slick.js via the build in this video by Tim Strifler (Divi Life) which I used as a base: https://www.youtube.com/watch?v=m8jMTbzyQU4.

The slider works how I want it to except whenever I resize the browser window. Then the slider "goes haywire" (stops, slides backwards, changes speeds, loads images at a stuttered/jumbled rate, etc.).

If I refresh the page at whatever screen size I'm currently on, then it will reset and work fine. (It does not appear to right itself if I just wait.)

Here is the code I am using to style the slider: (The Divi row it is in is set to 100% width and overflow is hidden.)

    jQuery(document).ready(function() {
    jQuery('.divilife-3-col-feature-blurb-slider').slick({
    dots: false,
    arrows: false,
    pauseOnHover: false,
    changeDir: false,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 0,
    speed: 7000,
    cssEase: "linear",
    infinite: true,
    
    responsive: [
      {
        breakpoint: 980,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1
        }
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  }); 
});
</script>

I have tried different settings including changing the row width, toggling btwn overflow hidden/visible, taking away the breakpoints, and adding mobileFirst: true.

But I haven't found anything that remedies the problem.