我在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>
我想插入两张或更多张幻灯片,没有任何问题。
检查附带的图片。
如果你从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>