$('.your-element').slick('setPosition');

<section id="carousel">
      <div class="your-class">
        <div class="banner"> // first slide
             <div class="bg"></div> // that's the background-image
             <div class="flex-container">
                 <div class="flex-item">
                     <h1 class="slide__title">Title</h1>
                     <p class="slide__paragraph">
                        text
                     </p>
                     <p class="slide__paragraph">
                        text
                     </p>
                      <p class="slide__paragraph">
                         text
                      </p>
                     <p class="slide__paragraph">
                         text
                     </p>
                     <a>
                       More
                     </a>
                 </div>
             </div>
        </div>

         <div class="image-grid"> // second slide
                <div class="image01"></div>
                <div class="image02"></div>
                <div class="image03"></div>
                <div class="image04"></div>
                <div class="image05"></div>
                <div class="image06"></div>
         </div>
      </div>
  </section>