Как сделать так, чтобы высота карусели Flickity была обусловлена ​​содержанием? - PullRequest
0 голосов
/ 20 марта 2019

Я пробую компонент с именем Flickity , супер-круто, но проблема в том, что высота карусели жестко определена в CSS и не принимает высоту содержимого в carousel-cell.Я попытался использовать опцию setGallerySize: false, но она не работает.

У меня есть веб-сайт, ориентированный на мобильные устройства, с контентом, который уменьшается в соответствии с устройством, и я хочу, чтобы карусель Flickity соответствовала высоте контента.

У вас есть какие-либо решения, пожалуйста?Большое спасибо

Рабочий стол для рендеринга (см. Место под карточками): enter image description here

Рендеринг для мобильного представления (см. Место под картами): enter image description here

1 Ответ

0 голосов
/ 20 марта 2019

Не видя код, я не могу по-настоящему предложить, как изменить flickity css, но я бы порекомендовал изменить и padding-bottom для контейнера или margin-bottom для содержимого flickity с процентов (%) до пикселей (px) если хотите, чтобы он остался прежним.

Если вы не хотите использовать пиксели, попробуйте запрос @media, чтобы уменьшить нижнюю границу элемента div при отображении на мобильном телефоне:

<style>
.container {
    padding-bottom: 10%;
}
@media screen and (max-width: 500px) { //replace max-width if too high or low
    .container {
        padding-bottom: 5%;
    }
}
</style>

<div class="container">
//content
</div>
...