И, конечно, ни в коем случае не нужно использовать что-то вроде такого * { transition: all .5s ease; }
<div class="1">
<div class="2">
</div>
</div>
.1{ position: relative;
width: 200px;
height: 200px;
}
.2 {position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
opacity: 0;
}
.2.active{ opacity: 1 }
display: none
и абсолютный абзац. Оба выходят из потока, т.е. для браузера слайд, считай, пустой. И для слика. Вот он и уменьшает размеры слайдера до 1 слайда, где есть картинка.display: none
slick не подружится. Как вариант - сделать картинку абсолютной + прозрачной + убрать вверх. А для класса .slick-center
возвращать всё обратно. Мне впадлу это делать, могу просто рабочий вариант твоего слайдера кинуть - вот он