ederribeiro / ngx-siema

Lightweight and simple carousel with no dependencies.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Build Status

ngx-siema

Lightweight and simple carousel with no dependencies.

Demo

ngx-siema

Installation

npm install ngx-siema --save

or

yarn add ngx-siema

Sample

Include NgxSiemaModule in your main module:

import { NgxSiemaModule} from 'ngx-siema';

@NgModule({
  // ...
  imports:      [
    NgxSiemaModule
  ],
  // ...
})
export class AppModule { }

Then use in your component:

import { Component, OnInit } from '@angular/core';
import { NgxSiemaOptions } from 'ngx-siema';

@Component({
  selector: 'sample',
  template: `
    <ngx-siema ngxClass="my-siema"
        [options]="options"
        (prev)="prev($event)"
        (next)="next($event)"
        (goTo)="goTo($event)">
      <ngx-siema-slide>
        <img src="assets/siema--pink.svg">
      </ngx-siema-slide>
      <ngx-siema-slide>
        <img src="assets/siema--yellow.svg">
      </ngx-siema-slide>
      <ngx-siema-slide>
        <img src="assets/siema--pink.svg">
      </ngx-siema-slide>
    </ngx-siema>
  `,
})
export class Sample implements OnInit {

  options: NgxSiemaOptions;

  ngOnInit() {
    this.options = {
        duration: 200,
        easing: 'ease-out',
        perPage: 1,
        startIndex: 0,
        draggable: true,
        threshold: 20,
        loop: false,
        onInit: () => {
            // runs immediately after first initialization
        },
        onChange: () => {
            // runs after slide change
        }
    };
  }

}

Example of usage with the navigation buttons:

import { Component, ViewChild } from '@angular/core';
import { NgxSiemaComponent } from 'ngx-siema';

@Component({
  selector: 'sample',
  template: `
    <ngx-siema>
      <ngx-siema-slide>
        <img src="assets/siema--pink.svg">
      </ngx-siema-slide>
      <ngx-siema-slide>
        <img src="assets/siema--yellow.svg">
      </ngx-siema-slide>
      <ngx-siema-slide>
        <img src="assets/siema--pink.svg">
      </ngx-siema-slide>
    </ngx-siema>
    <button (click)="onPrev(1)">Prev</button>
    <button (click)="onNext(1)">Next</button>
    <button (click)="onGoTo(2)">GoTo</button>
  `,
})
export class Sample {

  @ViewChild(NgxSiemaComponent) siema;

  onPrev(numbers: number) {
      this.siema.onPrev(numbers);
  }

  onNext(numbers: number) {
      this.siema.onNext(numbers);
  }

  onGoTo(slide: number) {
      this.siema.onGoTo(slide);
  }

}

License

MIT license.

About

Lightweight and simple carousel with no dependencies.

License:MIT License


Languages

Language:TypeScript 100.0%