Масштабирование гладкой карусели в контейнере с Centermode не работает ⇐ CSS

[Anonymous]

Я хочу иметь скользкую карусель с тремя слайдами и центрами, чтобы вы увидели средний слайд и части двух других слайдов слева и справа. Все работает нормально, когда у меня есть карусель, пройдя весь путь по всему экрану. Но когда я помещаю свою карусель в контейнер, который составляет 50 Вво, изображения не масштабируются - они остаются одинаковым размером, поэтому вы не видите ничего, кроме как часть одного слайда. Как сделать карусель масштабировать до содержащегося div?
Вот мой код:
https://codepen.io/lschneiderman/pen/byorzqm
html:





caption1



caption2



caption3






< /code>
css: < /p>
.screen {
position: relative;
width: 100%;
height: 100vh;
background-color: white ;
z-index: 3;
overflow: hidden;

}

.height-auto {
height: auto;
}

.slide-img {
padding-left: 10px;
padding-right: 10px;
}

.fa-angle-left, .fa-angle-right {
font-size: 7rem;
color: #979a9c;
position: absolute;
top: 38%;
cursor: pointer;
z-index: 3;
font-weight: 300;
}

.fa-angle-left {
left: -80px;
}

.fa-angle-right {
right: -80px;

}

.text-center {
text-align: center;
}
< /code>
jQuery: < /p>
$('.ss-exposition').slick({
dots: true,
prevArrow: "",
nextArrow: "",
swipe: true,
centerMode: true,
slidesToShow: 1,
centerPadding: '0px',
variableWidth: true,
variableHeight: true
});


Подробнее здесь: https://stackoverflow.com/questions/797 ... ot-working