ngx-simple-slick

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 watch

License

This project is licensed under the MIT License. See LICENSE for more information.

Table of contents

• Installation
• Import in Angular
• Options
• Example
• Custom Styling

---

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