0

Нужно сделать что бы все слайды были одинаковой высоты, а конкретнее, что бы они выравнивались по высоте со слайдом в котором больше всего контента.

введите сюда описание изображения

Я попробовал задать 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>

1

1 ответ 1

3

Чтобы растянуть слайды, нужно задавать display:flex непосредственному родителю слайдов(.slick-track).

$('.slide_wrapper').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});
*{
  box-sizing:border-box;
}
.container {
  max-width: 1300px;
  margin: 0 auto;
}

.slides {
  max-width: 400px;
  background-color: #cda;
  padding:10px;
}
.slide_wrapper .slick-track{
  display:flex;
}
.slick-slide.slides{
  height:auto;
  flex:0 0 auto;
}
<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 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 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
      </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 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 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>
  <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>

1
  • В том, то и дело, что пробовал так делать в своей реально верстке, не вышло, может что-то не так сделал. Надо будет попробовать еще раз.
    – uzi_no_uzi
    23 апр 2018 в 18:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.