javascript - 如果不转动破损的网格，Slick Carousel 无法插入第二个 slider

Question

我在 CSS3 网格环境中实现 Slick 时遇到了一些问题。如果不破坏网格并完全破坏，我无法实现不止一张幻灯片。

这是我正在使用的代码。

$( 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>

我想插入两张或更多幻灯片，没有问题。

检查附件中的图片。

Screen 1 without a second slide

Screen 2 with a second slide

Answer 1

如果您从 .mainCarousel 中删除 grid-area: carousel;，这将起作用

$(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>