How to use coverflow or slick slider in Angular2

问题

I need to use slick carousel or coverflow like functionality in Angular2 application. Is there a plugin or module provided by npm for the same that can be used in Angular2?

One of the Stack Overflow questions talks about this topic but it does not highlight the way to use it.

Link here: Slick Carousel with Angular 2.

回答1:

Implementation of slick carousel is really easy and you need to do the following:
npm install slick-carousel --save --global

Then install types
$ npm install @types/slick-carousel

And last you need to call it into component like this

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:

I was writing a comment to the answer of Slobodan Gajić but I realised I was changing so much I should probably just write my own answer.

So first the installation of slick-carousel and its types by typing the following lines into your terminal:

npm install slick-carousel --save

and

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

Make sure Jquery is already installed and that it's inside your dependencies instead of your devDependencies. So when using angular cli to create the project you probably need to move it. If it's not yet installed do it by running:

npm install jquery --save

Next you should add the styling of slick. I did this by adding the following line in the architect.build.styles array in angular.json.

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

In the html of your component you can put something like this:

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

And in the your component you could put the following for a centered slider (you can change the config as you like)

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
        });
    }
}

来源：https://stackoverflow.com/questions/40719439/how-to-use-coverflow-or-slick-slider-in-angular2

标签

angular

typescript

carousel

slick.js

coverflow