如何在Angular2中使用coverflow或slick滑块答案

【问题标题】：How to use coverflow or slick slider in Angular2如何在Angular2中使用coverflow或slick滑块
【发布时间】：2025-12-05 19:10:02
【问题描述】：

我需要在 Angular2 应用程序中使用类似轮播或封面流的功能。是否有 npm 提供的插件或模块可以在 Angular2 中使用？

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

链接：Slick Carousel with Angular 2。

【问题讨论】：

为什么不使用引导轮播？它易于实现且使用超级简单。
我基本上必须实现 slick/cover flow 提供的确切功能。
@Cecil Boye 触摸滑动不支持引导轮播。

标签： angular typescript carousel slick.js coverflow

【解决方案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();
  }

}

【讨论】：

【解决方案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 的架构师.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
        });
    }
}

【讨论】：