Slides stack on page load

I’m facing an issue with slick.js. The snippet I inserted is showing it too, but not as long as it is on my website.

I’ve checked the loading order for slick and the other JS files. And as far as I know, the order should be correct. The only reason I can see is that the slick files and function are loading slower than the content itself.

Things I tried:

  • Loading the slick.js as one of the first files after jQuery
  • Loading it with async
  • Loading the slick.js and its function before the content (which didn’t work at all)

What can I do to avoid this loading issue?

Network Dev-Tool

$(document).ready(function() {
  $('.slide-container').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    cssEase: 'linear',
    prevArrow: '<button type="button" class="slick-prev"><i class="fa fa-chevron-left" style="font-size: 2rem;"></i></button>',
    nextArrow: '<button type="button" class="slick-next"><i class="fa fa-chevron-right" style="font-size: 2rem;"></i></button>',
    refresh: true
  });
});
.slick-slide {
  position: relative;
}

.customer-slide {
  background: #000;
  height: 96vh !important;
  width: 100%;
}

.slick-prev,
.slick-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #000;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index: 9999;
  background-color: #fff;
  border: none;
}

.slick-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.slider-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  text-align: center;
}

.slider-text h1 {
  font-size: 5rem;
  margin: 0;
}

.slick-dots {
  position: absolute;
  bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.slick-dots li {
  margin: 0 5px;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 12px;
  height: 12px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: #cecece20;
  border-radius: 50%;
  transition: background 0.3s;
}

.slick-dots li.slick-active button {
  background: #000;
}
<head>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
</head>

<body>
  <div class="slide-container mobile">
    <div class="customer-slide">
      <div class="slider-text">
        <h1>Slide 1</h1>
      </div>
    </div>
    <div class="customer-slide">
      <div class="slider-text">
        <h1>Slide 2</h1>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
</body>