Как кастомизировать грид в карусели slick slider?
Как создать такой грид используя библиотеку slick.? Пробовал манипуляции с flexbox, но выходит очень коряво =)
$('.posts-curousel').slick({
rows: 2,
dots: true,
arrows: false,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3
});
.posts-curousel .slick-list {
margin-left: -30px;
}
.posts-curousel .slick-slide {
margin-left: 30px;
}
.posts-curousel .posts-carusel-item {
position: relative;
}
.posts-curousel .slick-dots {
bottom: -20px;
left: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" />
<div class="posts-curousel">
<div class="posts-carusel-item">
<div class="post-thumbnail">
<a href="#">
<img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
</a>
</div>
</div>
<div class="posts-carusel-item">
<div class="post-thumbnail">
<a href="#">
<img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
</a>
</div>
</div>
<div class="posts-carusel-item">
<div class="post-thumbnail">
<a href="#">
<img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
</a>
</div>
</div>
<div class="posts-carusel-item">
<div class="post-thumbnail">
<a href="#">
<img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
</a>
</div>
</div>
<div class="posts-carusel-item">
<div class="post-thumbnail">
<a href="#">
<img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
</a>
</div>
</div>
<div class="posts-carusel-item">
<div class="post-thumbnail">
<a href="#">
<img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
</a>
</div>
</div>
<div class="posts-carusel-item">
<div class="post-thumbnail">
<a href="#">
<img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
</a>
</div>
</div>
<div class="posts-carusel-item">
<div class="post-thumbnail">
<a href="#">
<img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
</a>
</div>
</div>
<div class="posts-carusel-item">
<div class="post-thumbnail">
<a href="#">
<img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
</a>
</div>
</div>
</div>