Не удается загрузить гладкую карусель под углом 4: Не удается загрузить CSS

Question

Я использую Slick-Carousel в угловых 4 Slick-Carousel

В моем home.component.html

<div class="list-books" *ngIf="results?.length > 0">
  <div class="col-md-3 col-xs-6" *ngFor="let item of results;let i=index">
    <a>
      <div class="mt-card-item">
        <div class="mt-card-content">
          <div class="row">
            <div class="col-md-12">
              <span>{{item.Name}}</span>
            </div>
          </div>
          <div class="row" >
            <div class="col-md-12">
              <span>{{item.Address}}</span>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <span class="mt-card-name">{{item.Telephone}}</span>
            </div>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>

Внутри моего home.component.ts

  $('.list-books').slick({
            dots: false,
            infinite: false,
            speed: 300,
            fade: false,
            slidesToShow: 4,
            slidesToScroll: 4,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });

Переменная results содержит данные, которые должны быть заполнены каруселью.Когда компонент загружается, я могу видеть данные, но не могу загрузить CSS и нарушает пользовательский интерфейс.Похоже, что данные идут первыми, но я не могу загрузить css, но не могу их понять

Я также добавил css в мои index.html и slick.min.js в мой angular.json

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css" />

 "node_modules/slick-carousel/slick/slick.min.js"

Любая идея о том, что можно сделать.Любая помощь будет оценена.

Answer 1

Здесь try Попробуйте добавить тайм-аут для вашего init ()

setTimeout(() => { //you slick-carousel init code }, 1000); 

В угловой версии js это сработало так, как предложил Nick njj

Answer 2

В angular.json есть раздел вроде:

"styles": [
    "//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css",
  ],

Или, если вы хотите добавить свой src / style.css

@import "//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css";

И другой рукой я нашел рабочуюпример на stackBlitz пример