Нужно сделать что бы все слайды были одинаковой высоты, а конкретнее, что бы они выравнивались по высоте со слайдом в котором больше всего контента.
Я попробовал задать display:flex
для родителя сладов, т.к. тогда flex-элементы
растянулись бы по высоте самого высокого, но дело в том, что slick
создает дополнительные div
элементы, из-за этого flex-элементами
становятся не те элементы которые нужны.
Сниппет: https://codepen.io/anon/pen/aGdqqN
$('.slide_wrapper').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
.container {
max-width: 1300px;
margin: 0 auto;
}
.slide_wrapper {
display: flex !important;
}
.slides {
max-width: 400px;
background-color: blue;
}
<head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
</head>
<body>
<div class="container">
<div class="slide_wrapper">
<div>
<div class="slides slides_1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis at, voluptatem similique tempora voluptate quia in ea minima earum consequatur eveniet, praesentium illum error delectus optio nobis eaque distinctio! Suscipit nostrum?praesentium illum error delectus optio nobis eaque distinctio! Suscipit nostrum?praesentium illum error delectus optio nobis eaque distinctio! Suscipit nostrum?
</div>
</div>
<div>
<div class="slides slides_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis at, voluptatem similique tempora voluptate quia in ea minima earum consequatur eveniet, praesentium illum error delectus optio nobis eaque distinctio! Suscipit nostrum?
</div>
</div>
<div>
<div class="slides slides_3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis at, voluptatem similique tempora voluptate quia in ea minima earum consequatur eveniet, praesentium illum error delectus optio nobis eaque distinctio! praesentium illum error delectus optio nobis eaque distinctio! Suscipit nostrum?praesentium illum error delectus optio nobis eaque distinctio! Suscipit nostrum?praesentium illum error delectus optio nobis eaque distinctio! Suscipit nostrum?Suscipit nostrum?
</div>
</div>
<div>
<div class="slides slides_4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis at, voluptatem similique tempora voluptate quia in ea minima earum consequatur eveniet, praesentium illum error delectus optio nobis eaque distinctio! Suscipit nostrum?
</div>
</div>
<div>
<div class="slides slides_5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis at, voluptatem similique tempora voluptate quia in ea minima earum consequatur eveniet, praesentium illum error delectus optio nobis eaque distinctio! Suscipit nostrum?praesentium illum error delectus optio nobis eaque distinctio! Suscipit nostrum?praesentium illum error delectus optio nobis eaque distinctio! Suscipit nostrum?praesentium illum error delectus optio nobis eaque distinctio! Suscipit nostrum?praesentium illum error delectus optio nobis eaque distinctio! Suscipit nostrum?
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
</body>