Как сделать одинаковую высоту у swiper?
Как сделать так что-бы карточки подстраивались друг под друга, если хотя-бы одна выше других? Вроде все правильно но не работает. Спасибо
snippet
Дополнительно:
.swiper-slide {height: auto;}
но там у тебя еще куча фигни с height: 100%. уберешь лишние - будет норм
.reviews__slider .reviews__slide { height: auto; display: flex; } .reviews__item{ box-shadow: -1px 2px 15px 0px rgba(30, 35, 66, 0.15); border-radius: 10px; padding: 25px 25px 28px 25px; margin: 15px; display: flex; flex-direction: column; position: relative; margin: 15px; /* height: 100%; */ } |
.reviews__slider .reviews__slide { height: auto; display: flex; } .reviews__item{ box-shadow: -1px 2px 15px 0px rgba(30, 35, 66, 0.15); border-radius: 10px; padding: 25px 25px 28px 25px; margin: 15px; display: flex; flex-direction: column; position: relative; margin: 15px; /* height: 100%; */ }
Я написал вложенный селектор .reviews__slider .reviews__slide потому что в кодпене стили слайдера перебивают. У себя просто подключите сначала стили слайдера, потом свои, и можно будет обойтись без повышенной специфичности.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы установить одинаковую высоту для слайдов в Swiper, можно воспользоваться опцией `autoHeight`. Эта опция позволяет автоматически изменять высоту слайдов в соответствии с содержимым.
Прежде всего, убедитесь, что у вас установлена последняя версия Swiper. Затем, при инициализации Swiper добавьте следующий код:
var swiper = new Swiper('.swiper-container', { autoHeight: true, // Другие опции });
Этот код скажет Swiper автоматически подстраивать высоту слайдов под содержимое. Однако, иногда может потребоваться немного дополнительной настройки. Например, если ваши слайды содержат изображения разного размера, то вы можете добавить дополнительные стили для изображений:
.swiper-slide img { max-height: 100%; width: auto; }
Этот CSS стиль поможет изображениям заполнить слайды без искажения пропорций.
Если после этого слайды все равно имеют разные высоты, попробуйте добавить дополнительные стили для контейнера слайдера:
.swiper-container { height: auto !important; }
Это может помочь установить одинаковую высоту для всех слайдов. Не забудьте также проверить, что у вас правильно настроены стили для контента внутри слайдов, так как они также могут влиять на высоту слайдера.
Надеюсь, что эти советы помогут вам установить одинаковую высоту для слайдов в Swiper! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.