Slick Carousel无法插入第二个滑块而不会打开网格

问题描述 投票:0回答:1

我在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/[email protected]/slick/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/npm/[email protected]/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

javascript html css slick
1个回答
0
投票

如果你从grid-area: carousel;删除.mainCarousel,这是有效的

$(document).ready(function() {
  $('#carousel').slick({
    infinite: true,
    autoplay: true,
    slidesToShow: 2,
    slidesToScroll: 2
  });
});
@import "http://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/slick/slick.min.js"></script>
© www.soinside.com 2019 - 2024. All rights reserved.