`ngxslick` is a lightweight and very complete Angular library for rendering simple slideshow of elements without any 3rd party dependencies
- Supports dots and arrow navigation
- Custom styling
- Multi row support
[Demo](https://ngx-carousel-slick-demo.vercel.app)
---
## Using library locally
Run the below command and use npm link under `dist/ngxslick` folder in your application
```console
npm run watch
```
## License
This project is licensed under the MIT License. See LICENSE for more information.
## Table of contents
- [Installation](#installation)
- [Import in Angular](#import-in-angular)
- [Options](#options)
- [Example](#example)
- [Custom Styling](#custom-styling)
---
### Installation
```
$ npm i ngx-simple-slick --save
```
### Import in Angular
```console
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxSlickModule } from 'ngx-simple-slick';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxSlickModule
],
providers: [ ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```
```console
// Content goes here
```
### Options
ngxslick comes with some parameters / options in order to make it fit your needs. The following parameters / options have to be used like this:
```console
```
| Option | Type | Required | Values | Description |
|--------------- |------------------- |-------------- |----------------- |---------------------------------------------------------------------- |
| loadStatus | @Input String | **Optional** | done / fetching | Status whether data loading is complete or fetching |
| dots | @Input Boolean | **Optional** | true / false | Dots navigation enabled if true; default arrow navigation is enabled |
| left | @Input String | **Optional** | | Custom class for left navigation arrow |
| right | @Input String | **Optional** | | Custom class for right navigation arrow |
### Example
#### import and usage
```console
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxSlickModule } from 'ngx-simple-slick';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxSlickModule
],
providers: [ ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```
```console
// demo.component.ts
export class DemoComponent implements OnInit {
dataObj = new Array(21);
constructor() { }
ngOnInit(): void {
}
}
```
```console
// demo.component.html
Card {{ i + 1 }}
```
### Custom Styling
```console
// demo.component.html
// demo.component.css
// styling dots
:host::ng-deep .pagination {
padding: 5px !important;
}
:host::ng-deep .leftArrow {
.prev-arrow {
right: -50px !important;
}
}
:host::ng-deep .rightArrow {
.next-arrow {
right: -50px !important;
}
}
```
---
_Source: https://npm.io/package/ngx-simple-slick · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
