1

Всем привет! Я попробовал уже много способов решения этой проблемы, но так и не смог решить её.

Мне необходимо, чтобы высота слайдов в slick slider была одинаковой и соответственно зависела от высоты самого большого слайда, как это можно сделать в моём случае?

https://codepen.io/Belzer/pen/ExdMWPJ

.reviews {
    margin-top: 32px;
    &-slider {
        margin-top: 16px;
        &-review {
            padding: 24px;
            background-color: $neutral-9;
            margin: 0 12px;
            border-radius: 16px;
            &-heading {
                display: flex;
                align-items: center;
                &-text {
                    margin-left: 8px;
                    &-link {
                        font-size: 14px;
                        color: $neutral-3;
                        text-decoration: underline;
                    }
                }
                img {
                    width: 48px;
                    height: 48px;
                    border-radius: 100;
                }
            }
            &-text {
                margin-top: 8px;
                color: $neutral-1;
            }
        }
    }
}

2 ответа 2

2

В своё время на просторах интернета нашёл вот такой 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();

0

Для того, чтобы высота слайдов была одинаковой и зависела от высоты самого большого слайда, можно использовать 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%. Наконец, мы устанавливаем верхний внутренний отступ каждого слайда, кроме первого, на вычисляемое значение, основанное на соотношении ширины и высоты первого слайда.

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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