Slick carousel - силовые слайды имеют одинаковую высоту

Ответ 1

Хорошо, ребята, я нашел легкое решение. Просто добавьте функцию обратного вызова setPosition (срабатывает после изменения позиции/размера), которая устанавливает высоту слайдов на высоту слайдера (slideTrack):

JS

$('.slider').slick({
    autoplay: false,
    dots: false,
    infinite: false,
    arrows: false,
    slidesToShow: 2,
    slidesToScroll: 2,
  rows: 0
})
.on('setPosition', function (event, slick) {
    slick.$slides.css('height', slick.$slideTrack.height() + 'px');
});

Не забывайте, что ваши слайды должны иметь полную высоту:

CSS

.slide {
  height: 100%;
}

Вот немного jsFiddle, чтобы продемонстрировать: https://jsfiddle.net/JJaun/o29a4q45/

Ответ 2

Добавьте пару стилей CSS, и все будет готово:

.slick-track
{
    display: flex !important;
}

.slick-slide
{
    height: inherit !important;
}

Наслаждайтесь! :-)

Ответ 3

У меня есть другое решение, основанное только на CSS. вы можете переопределить плавающие элементы с помощью table/table-cell.

$(function() {
  $('.slider')
    .slick({
      autoplay: false,
      dots: false,
      infinite: false,
      arrows: false,
      slidesToShow: 2,
      slidesToScroll: 2,
      rows: 0
    });
})

.slide {
  background-color: #ccc;
  padding: 10px;
  display: table-cell !important;
  float: none !important;
}

.slick-track {
  display: table !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>


<div class="slider">
  <div class="slide">
    <p>Lorem ipsum.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
  </div>
  <div class="slide">
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
  </div>
</div>

Ответ 4

Решение js от @JJaun не идеально, потому что вы видите скачок высоты, если вы используете фоновое изображение для слайдов. Это сработало для меня:

.slick-track {
  display: flex !important;
}

.slick-slide {
  height: auto;
}

Ответ 5

Я написал быстрый JS-хак, чтобы сделать галерею с разными высотами изображений, чтобы выглядеть немного аккуратно.

Он делает следующее:

1. Получить экземпляр ползунка
2. Определите высоту - высота изображения будет установлена на
3. Получите src attr для каждого изображения и скройте его

4. Установите src attr в качестве родителя изображения как фоновое изображение вместе с некоторым CSS.

   function equalizeImagesHeight(slider) {
       const slides = slider.find('.slick-slide');
       const imgHeight = $(slider)[0].clientHeight;
       slides.each(function(slide){
           const src = $(this).find('img').hide().attr('src');
           $(this).css({
               backgroundImage:'url('+src+')',
               minHeight: imgHeight,
               backgroundSize: "cover",
               backgroundPosition: "center"
           });
       });
   };
   

   equalizeImagesHeight ($() 'мой слайдер.');

Ответ 6

Вот решение только для SCSS, если вы в порядке с использованием object-fit:

.slick {
  .slick-track {
    display: flex;

    .slick-slide {
      display: flex;
      height: auto;

      img {
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }
  }
}

Ответ 7

Решение, помеченное как правильное, не будет работать, если для параметра "бесконечный" задано значение "истина".