Slick with FlexBox CSS3 not working

I would like help with the implementation of Carousel Slick with Flex Box CSS3

When I enter more than one slide, the structure loses the default. I currently have the following codes:

1.HTML

    <article class="mainCarousel">
  <div id="carousel" class="carousel-item">
    <h1>TESTE 1</h1>
    <h1>TESTE 2</h1>
  </div>

2.CSS

#main {
  display: grid;
  grid-template-rows: 10vh auto auto 10vh;
  grid-template-areas: "header nav" "carousel carousel" "content content" "form form";
}

.mainCarousel {
  grid-area: carousel;
  background: gray;
}

#carousel {
  width: 100%;
}

#carousel img {
  max-height: auto;
  max-width: 100%;
}

3.JS

$(document).ready(function(){
  $('#carousel').slick({
     slidesToShow: 1,
     slidesToScroll: 2,
     dots: true 
  });
});

If I remove one, that is, a slide, it returns to normal shape. But if I add another slide, it gets all broken.

Does anyone know how to fix it?