Angular 8的ngx-slick-carousel问题

时间:2019-12-03 16:34:29

标签: angular8

我在角度8.2.14中使用ngx-slick-carousel,并且在滚动过程中分两行获取图像

enter image description here

这是我的 HTML 代码:

<ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="slideConfig">
      <div ngxSlickItem *ngFor="let slide of slides" class="slide">
        <img src="{{ slide.img }}" alt="" width="100%">
      </div>
    </ngx-slick-carousel>

这是我的 TS 代码:

slides = [
    { img: "../../assets/xd5.jpg" },
    { img: "../../assets/xd5.jpg" },
    { img: "../../assets/xd5.jpg" },
    { img: "../../assets/xd5.jpg" },
    { img: "../../assets/xd5.jpg" },
    { img: "../../assets/xd5.jpg" }
  ];
  slideConfig = { "slidesToShow": 4, "slidesToScroll": 1, "autoplay": true, "centerMode": true };

1 个答案:

答案 0 :(得分:0)

首先,您必须使用npm安装光滑轮播,然后将以下行添加到您的 把angular.json文件放到scrpits部分中

“ node_modules / slick-carousel / slick / slick.min.js”

然后必须添加

“ node_modules / slick-carousel / slick / slick.scss”,

“ node_modules / slick-carousel / slick / slick-theme.scss”

将文件放入CSS部分。