https://github.com/devmark/ngx-slick

angular6 a wrapper for slick plugin
https://github.com/devmark/ngx-slick

angular angular2 jquery slick slick-carousel ui

Last synced: 5 days ago
JSON representation

angular6 a wrapper for slick plugin

• Host: GitHub
• URL: https://github.com/devmark/ngx-slick
• Owner: devmark
• Created: 2017-05-06T05:43:26.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-04-09T23:33:04.000Z (over 5 years ago)
• Last Synced: 2024-12-12T22:13:24.879Z (10 days ago)
• Topics: angular, angular2, jquery, slick, slick-carousel, ui
• Language: JavaScript
• Homepage:
• Size: 99.6 KB
• Stars: 108
• Watchers: 7
• Forks: 46
• Open Issues: 30
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

README

        
# ngx-slick

Support angular 6+, Slick 1.8.1

[Example](https://embed.plnkr.co/fblxzfPneL66950A4VDM/)

## Installation

To install this library, run:

```bash

$ npm install ngx-slick --save

```

## Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

```bash

$ npm install ngx-slick

```

and then from your Angular `AppModule`:

```typescript

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library

import { SlickModule } from 'ngx-slick';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    // Specify your library as an import

    SlickModule.forRoot()

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

- Include jquery and slick css/js in your application :

```

```

Once your library is imported, you can use its components, directives and pipes in your Angular application:

```html

  

    

        


              

        

    


    Add

    Remove

    slickGoto 2

    unslick

```

```javascript

  slides = [

    {img: "http://placehold.it/350x150/000000"},

    {img: "http://placehold.it/350x150/111111"},

    {img: "http://placehold.it/350x150/333333"},

    {img: "http://placehold.it/350x150/666666"}

  ];

  slideConfig = {"slidesToShow": 4, "slidesToScroll": 4};

  addSlide() {

    this.slides.push({img: "http://placehold.it/350x150/777777"})

  }

  removeSlide() {

    this.slides.length = this.slides.length - 1;

  }

  afterChange(e) {

    console.log('afterChange');

  }

```

## Development

To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

```bash

$ npm run build

```

To lint all `*.ts` files:

```bash

$ npm run lint

```

## License

MIT © [Mark](mailto:[email protected])