Angular2 slick carousel

Question

Is there a tutorial to create an ANGULAR2 slick carousel component.

Or at least can anyone help me include jQuery and slick carousel script in ANGULAR2.

Christos

Answer 1

1. To install slick over npm you can refer to the original documentation or just run

npm install slick-carousel

in your project directory and npm will resolve jquery dependency as well.

2. Include jquery and slick libraries
   • If you are using angular-cli, then include libraries in angular-cli.json file: ... "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/slick-carousel/slick/slick.min.js" ], ...
   • also you can include libraries directly in index.html file
   • or use some other options
3. Refer to another stackoverflow question on how to create a slick-slider component.

Discount

Answer 2

You might want to look into ngx-drag-scroll, it has features like mouse drag to scroll and hide scrollbar etc.

Usage example:

<div drag-scroll drag-scroll-y-disabled="true" scrollbar-hidden="true" >
  <img *ngFor="let image of imagelist" [src]="'you_assets_path' + image" />
</div>

For more documentation, there a demo site: https://github.com/bfwg/ngx-drag-scroll

Averil

can it work to show text content or basically say a material card component one per slide? – Svend

yeah, if the width of your material card component is the same as the width of your carousel component. – Averil

ok thats for number of cards per view. how about non image data ? – Svend

You can put them in a div and give a fixed with to the div as well. – Averil

Nice! Although could be limited for some use cases. There is a bit more extended swiper: github.com/zefoy/ngx-swiper-wrapper – Discount