Ngx Slick
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
Using library locally
Run the below command and use npm link under dist/ngxslick folder in your application
npm run watchLicense
This project is licensed under the MIT License. See LICENSE for more information.
Table of contents
Installation
$ npm i ngx-simple-slick --save
Import in Angular
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 { }<ngxslick [dots]=true [loadStatus]="'done'">
<ng-container>
// Content goes here
</ng-container>
</ngxslick>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:
<ngxslick [parameter-or-option-name]="value"></ngxslick>| 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
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 { }// demo.component.ts
export class DemoComponent implements OnInit {
dataObj = new Array(21);
constructor() { }
ngOnInit(): void {
}
}// demo.component.html
<ngxslick [dots]=true [loadStatus]="'done'">
<ngxslick [dots]=true [loadStatus]="'done'">
<ng-container *ngFor="let card of dataObj; let i = index">
<div class="card">
<figure>
<img src="https://via.placeholder.com/150x150?text=NG%20Slick" />
<figcaption>Card {{ i + 1 }}</figcaption>
</figure>
</div>
</ng-container>
</ngxslick>
</ngxslick>Custom Styling
// demo.component.html
<ngxslick [dots]=true [left]="'leftArrow'" [right]="'rightArrow'" [loadStatus]="'done'">
</ngxslick>
// 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;
}
}