Slick Carousel не может вставить второй слайдер без поворота сломанной сетки

Question

У меня возникли проблемы с реализацией Slick в среде CSS3 Grid. Я не могу реализовать более одного слайда, не разбив сетку и не разбившись полностью.

Вот код, с которым я работаю.

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

#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-item {
  max-height: 300px;
}

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

<script src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


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

    </article>

Я бы хотел вставить два или более слайдов без проблем.

Проверьте прилагаемые фотографии.

Экран 1 без второго слайда

Экран 2 со вторым слайдом

Answer 1

Это работает, если вы удалите grid-area: carousel; из .mainCarousel

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

@import "http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.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-item {
  max-height: 300px;
}

<div id="main">

  <article class="mainCarousel">

    <div id="carousel" class="carousel-item">
      <div>
        <h1>SLIDE 1</h1>
      </div>
      <div>
        <h1>SLIDE 2</h1>
      </div>
      <div>
        <h3>SLIDE 3</h3>
      </div>
    </div>

  </article>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>