Question

我需要在Angular2应用程序中使用光滑的轮播或类似于Coverflow的功能。 npm是否提供了可以在Angular2中使用的插件或模块？

其中一个Stack Overflow问题讨论了这个主题，但没有强调使用它的方法。

Answer 1

光滑传送带的实现非常简单，您需要执行以下操作：
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

我在为SlobodanGajić的答案写评论，但我意识到自己变化很大，应该只写我自己的答案。

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

npm install slick-carousel --save

和

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

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

npm install jquery --save

接下来，您应该添加光滑的样式。我是通过在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或光滑滑块

2 个答案: