ngx-slickjs v1.5.2

ngx-slickjs

ngx-slickjs is slick-carousel package for Angular 6+. ngx-slickjs can lazy load slick.js packages. ngx-slickjs very small and very stable.

Stackblitz Example

Installation

yarn add ngx-slickjs

or

npm install ngx-slickjs

Usage

Import module to your main module

import { NgxSlickJsModule } from "ngx-slickjs";

@NgModule({
  imports: [
    // ...
    NgxSlickJsModule.forRoot()
  ]
})
export class AppModule {}

<div slickContainer id="your-slide-container">
  <img slickItem id="your-slide" src="https://placeholder.pics/svg/400" />
  <img slickItem id="your-slide-2" src="https://placeholder.pics/svg/400" />
</div>

You can use slick methods. SlickContainerDirective exported with slick key.

<div slickContainer #slickController="slick">
  <img
    slickItem
    *ngFor="let item of [0,1,2,3,4,5];"
    src="https://placeholder.pics/svg/400"
  />
</div>

<button (click)="slickController.next()">Next</button>
<button (click)="slickController.prev()">Previous</button>
<button (click)="slickController.goTo(4)">Go to 4</button>
<button (click)="slickController.play()">Play</button>
<button (click)="slickController.pause()">Pause</button>
<button (click)="slickController.unslick()">Destroy</button>
<button (click)="slickController.initSlick()">Init</button>

Sub Module Import

import { NgxSlickJsModule } from "ngx-slickjs";

@NgModule({
  imports: [
    // ...
    NgxSlickJsModule
  ]
})
export class AnotherModule {}

Scripts and styles urls

forRoot Options:

Note: The above urls are download lazy. The urls don't increase initial opening time.

Example:

import { NgxSlickJsModule } from "ngx-slickjs";

@NgModule({
  imports: [
    // ...
    NgxSlickJsModule.forRoot({
      links: {
        jquery: "https://code.jquery.com/jquery-3.4.0.min.js",
        slickJs:
          "https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js",
        slickCss:
          "https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css",
        slickThemeCss: null // if you are set null, this css won't load
      }
    })
  ]
})
export class AppModule {}

Input and outputs:

Inputs:

Outputs:

You can import Slick config type:

import { Slick } from "ngx-slickjs";

slickConfig: Slick.Config = {
  infinite: true,
  slidesToShow: 4,
  slidesToScroll: 2,
  dots: true,
  autoplay: true,
  autoplaySpeed: 2000
};

Config

Responsive Option Example

The responsive option, and value, is quite unique and powerful. You can use it like so:

$(".slider").slick({
  // normal options...
  infinite: false,

  // the magic
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        infinite: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        dots: true
      }
    },
    {
      breakpoint: 300,
      settings: "unslick" // destroys slick
    }
  ]
});

Bonus

LazyLoadService Usage

import {LazyLoadService} from 'ngx-slickjs';

constructor(private lazyLoadService: LazyLoadService) {}

  ngAfterViewInit(){
    this.lazyLoadService
      .load(yourScriptUrl, 'script')
      .subscribe(() => {
        // loaded your script
      });

    this.lazyLoadService
      .load(yourCssUrl, 'style')
      .subscribe(() => {
        // loaded your css
      });
  }