Слайдер не меняет положение активного слайда

Я работаю над скользким слайдером, который содержит 3 фигуры с фоновым изображением. Первый слайд работает должным образом, но все следующие слайды не отображаются. Инспектор показывает, что каждый из слайдов, следующих за первым, сохраняет свою неактивную позицию, заданную сликом, который выталкивает их за экран. Это работает, когда я просто использую <img /> вместо <figure> или же <div>, Я бы использовал <img /> если бы не проблемы с размерами, которые мне дали.

Я зацикливаю содержимое, чтобы легко контролировать количество слайдов

<div class="hero__background">
<?php foreach ($images as $image) { ?>
<div class="hero__background-image" style="background-image: url('<?php echo $image['url']; ?>');"></div>
<?php } ?>
</div>

И это текущий CSS

&.hero {
position: relative;
height: 550px;

.hero__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightgray;
z-index: -999;

hero__background-image {
background-size: cover;
}

.slick-list,
.slick-track,
.slick-slide {
height: 100%;
margin: 0;
}
}
}

И JS, как просили 🙂

$('.hero__background').slick({
infinite: true,
autoplay: true,
fade: true,
speed: 600,
arrows: false,
dots: false
});

Что может быть причиной сбоя фоновых изображений? Любая помощь и совет будет высоко ценится.