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.

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.

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