1

Как мне через vanilla js получить высоту самого высокого элемента слайдера и присвоить его к остальным, чтобы по итогу была одна высота для всех?

На сайте использовался swiper-слайдер, при добавлении в него картинок разного размера они распологаются в различной высоте, через параметры самого слайдера не получилось это пофиксить, флексами тоже, задавать жестко высоту через css кажется костылём.

2 ответа 2

2

Тут JS не понадобится. Флексами все должно работать. У элемента swiper-wrapper должно быть align-items: stretch; у элементов swiper-slide должно быть свойство height: auto;. Тысячу раз так делал, и не нужно городить костыли на JS. Если у слайда есть внутри элемент в качестве обертки для контента, то у него должно быть height: 100%.

1
  • Да, вы правы, это я потом нашел, но совсем забыл здесь отписаться 7 мая 2021 в 8:59
1

Может кому-то пригодится.

Тут я нашел как получить высоту самого длинного элемента.

А дальше уже сам дописал:

function setMaxHeight() {
 
  let els = document.querySelectorAll(".card-img-top"),
    arr = [];
    /* Итерация каждого элемента и добавление их высоты в массив arr*/
  for (let i = 0; i < els.length; i++) {
    arr.push({ height: els[i].clientHeight });
  }
/* Вывод самой длинной высоты элементов */
  let elsMaxHeight = Math.max(...arr.map(o => o.height));
/* Присваивание полученной высоты для всех других элементов */
  for (let i = 0; i < els.length; i++) {
    console.log(els[i].style.height = elsMaxHeight + 'px');
  }
}
setMaxHeight();

Ваш ответ

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

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