CSS не работает должным образом для ползунка в угловой 6

Question

Я использовал ngfor для динамических изображений слайдера, но слайды отображаются один за другим под кодом home.component.html.

<div class="item-slick1 bg-overlay1" * ngFor="let slide of sliders" [style.backgroundImage]="'url('+slide.slider+')'"
    data - thumb="assets/images/thumb-02.jpg" data - caption="Women’s Wear">
    <div class="container h-full">
        <div class="flex-col-c-m h-full p-t-100 p-b-60 respon5">
            <div class="layer-slick1 animated visible-false" data-appear="fadeInDown" data-delay="0">
                <span class="ltext-202 txt-center cl0 respon2">
                    {{ slide.text }}
                </span>
            </div>
            <div class="layer-slick1 animated visible-false" data-appear="zoomIn" data-delay="1600">
                <a href="product.html" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn2 p-lr-15 trans-04">
                    Shop Now
                </a>
            </div>
        </div>
    </div>
</div>

Как получить правильный динамический слайдер?