如何在 Angular2 中使用 coverflow 或 slick slider

Question

我需要在 Angular2 应用程序中使用 slick carousel 或 coverflow 之类的功能。是否有 npm 提供的插件或模块可以在 Angular2 中使用？

其中一个 Stack Overflow 问题谈到了这个主题，但没有强调使用它的方式。

Link 这里：.

Answer 1

slick carousel 的实现非常简单，您需要执行以下操作：
npm install slick-carousel --save --global

然后安装类型
$ npm install @types/slick-carousel

最后你需要像这样将它调用到组件中

import {Component, OnInit} from '@angular/core';
import * as jQuery from 'jquery';
import 'slick-carousel';

@Component({
  selector: 'your-page',
  templateUrl: './your-page.component.html',
})
export class YourPageComponent implements OnInit{

  ngOnInit() {
    jQuery(".your-slider").slick();
  }

}

Answer 2

我正在为 Slobodan Gajić 的回答写评论，但我意识到我正在改变太多，我可能应该写下我自己的回答。

因此，首先通过在终端中键入以下行来安装 slick-carousel 及其类型：

npm install slick-carousel --save

和

npm install @types/slick-carousel --save-dev

确保 Jquery 已经安装并且它在你的依赖项中而不是你的 devDependencies 中。因此，当使用 angular cli 创建项目时，您可能需要移动它。如果尚未安装，请按运行:

安装

npm install jquery --save

接下来您应该添加 slick 的样式。我通过在 angular.json.

的 architect.build.styles 数组中添加以下行来做到这一点

"node_modules/slick-carousel/slick/slick.scss"

在组件的 html 中，您可以放置如下内容：

<div class="slick-carousel">
    <div>slide 1</div>
    <div>slide 2</div>
    <div>slide 3</div>
</div>

并且在您的组件中，您可以将以下内容用于居中滑块（您可以根据需要更改配置）

import {Component, OnInit} from '@angular/core';
import * as jQuery from 'jquery';
import 'slick-carousel';

@Component({
    selector: 'your-page',
    templateUrl: './your-page.component.html',
})
export class YourPageComponent implements OnInit{

    ngOnInit() {
        jQuery('.slick-carousel').slick({
            centerMode: true,
            centerPadding: '60px',
            slidesToShow: 5,
            infinite: false
        });
    }
}

如何在 Angular2 中使用 coverflow 或 slick slider

How to use coverflow or slick slider in Angular2

coverflow

carousel

typescript

slick.js

angular