Как сделать одинаковую высоту слайдов в Slick Slider

В своё время на просторах интернета нашёл вот такой jQuery-скрипт, вполне рабочий:

function carouselNormalization() {
  var items = $('.slide'), //grab all slides
    heights = [], //create empty array to store height values
    tallest; //create variable to make note of the tallest slide

  if (items.length) {
    function normalizeHeights() {
      items.each(function() { //add heights to array
        heights.push($(this).height()); 
      });
      tallest = Math.max.apply(null, heights); //cache largest value
      items.each(function() {
        $(this).css('min-height',tallest + 'px');
      });
    };
    normalizeHeights();

    $(window).on('resize orientationchange', function () {
      tallest = 0, heights.length = 0; //reset vars
      items.each(function() {
        $(this).css('min-height','0'); //reset min-height
      }); 
      normalizeHeights(); //run it again 
    });
  }
}
carouselNormalization();

Для того, чтобы высота слайдов была одинаковой и зависела от высоты самого большого слайда, можно использовать JavaScript.

Код JavaScript должен быть добавлен перед закрывающим тегом body. В этом коде мы найдем все слайдеры .slick-slider и их дочерние элементы .slick-slide. Затем мы пройдемся по всем слайдам каждого слайдера и найдем самый высокий из них. После этого мы установим высоту для всех слайдов данного слайдера равной высоте самого высокого слайда.

Вот как может выглядеть такой код:

$(document).ready(function() {
  $(".slick-slider").each(function() {
    var highestSlide = 0;
    var slider = $(this);
    slider.find(".slick-slide").each(function() {
      if ($(this).height() > highestSlide) {
        highestSlide = $(this).height();
      }
    });
    slider.find(".slick-slide").css("height", highestSlide + "px");
  });
});

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

Если вы хотите установить высоту слайдов без использования JavaScript, вам нужно добавить некоторые стили CSS.

Вот что вы можете сделать:

1. Выберите наибольший слайд с помощью селектора :first-child
2. Установите height: auto для всех слайдов, чтобы их высота можно было автоматически менять в зависимости от содержимого
3. Скопируйте стили из первого слайда и скопируйте их в другие слайды

Например, если у вас есть следующий код HTML:

<div class="slick-slider">
  <div class="slick-slide">
    <!-- Текст первого слайда -->
  </div>
  <div class="slick-slide">
    <!-- Текст второго слайда -->
  </div>
  <div class="slick-slide">
    <!-- Текст третьего слайда -->
  </div>
</div>

Вы можете добавить следующие стили CSS:

.slick-slider .slick-slide:first-child {
  height: auto !important;
}

.slick-slider .slick-slide {
  height: 100%;
}

.slick-slider .slick-slide:not(:first-child) {
  padding-top: calc(100% * (высота первого слайда / ширина первого слайда)) !important;
}

Здесь мы выбираем первый слайд с помощью :first-child, затем устанавливаем height: auto для этого слайда, чтобы его высота автоматически регулировалась в зависимости от содержимого. Затем мы устанавливаем общую высоту всех остальных слайдов в 100%. Наконец, мы устанавливаем верхний внутренний отступ каждого слайда, кроме первого, на вычисляемое значение, основанное на соотношении ширины и высоты первого слайда.

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