Question

我在角度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并破坏UI。看起来数据是第一位的，但无法加载CSS无法弄清

我还在我的index.html和slick.min.js的我的angular.json中添加了css

<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（）添加超时

D:\HBase\hbase-2.2.0-bin.tar\hbase-2.2.0-bin\hbase-2.2.0>bin\start-hbase
Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory
        at org.apache.hadoop.conf.Configuration.<clinit>(Configuration.java:187)
        at org.apache.hadoop.hbase.util.HBaseConfTool.main(HBaseConfTool.java:39)
Caused by: java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory
        at java.net.URLClassLoader.findClass(URLClassLoader.java:381)
        at java.lang.ClassLoader.loadClass(ClassLoader.java:424)
        at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:331)
        at java.lang.ClassLoader.loadClass(ClassLoader.java:357)
        ... 2 more
ERROR: Could not determine the startup mode.

在angular 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上找到了一个可行的示例 example

无法加载角度为4的圆滑传送带：无法加载CSS

2 个答案: