Skip to content
This repository has been archived by the owner. It is now read-only.
Lightweight and simple carousel with no dependencies.
TypeScript JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
e2e
src
.angular-cli.json
.editorconfig
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
karma.conf.js
package-lock.json
package.json
protractor.conf.js
rollup.publish.config.js
tsconfig.json
tsconfig.publish.es6.json
tslint.json

README.md

Build Status

ngx-siema

THIS REPOSITORY IS NO LONGER IN USE.

Siema - Lightweight and simple carousel with no dependencies.

Installation

npm i ngx-siema

Sample

Include NgxSiemaModule in your main module:

import { NgxSiemaModule } from 'ngx-siema';

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

Then use in your component:

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

@Component({
  selector: 'sample',
  template: `
    <ngx-siema [options]="options">
      <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 SampleComponent implements OnInit {

  options: NgxSiemaOptions = {
    selector: '.siema',
    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 } from '@angular/core';
import { NgxSiemaService } from 'ngx-siema';

@Component({
  selector: 'sample',
  template: `
    <ngx-siema [options]="options">
      <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 type="button" (click)="prev()">Prev</button>
    <button type="button" (click)="next()">Next</button>
    <button type="button" (click)="goTo()">GoTo</button>
  `,
})
export class SampleComponent {

  options: NgxSiemaOptions = {
    selector: '.siema',
  };

  constructor(private ngxSiemaService: NgxSiemaService) {
  }

  prev() {
    this.ngxSiemaService.prev(1)
      .subscribe((data: any) => console.log(data));
  }

  next() {
    this.ngxSiemaService.next(1)
      .subscribe((data: any) => console.log(data));
  }

  goTo() {
    this.ngxSiemaService.goTo(1)
      .subscribe((data: any) => console.log(data));
  }
}

Example of usage with multiple instances of ngx-siema

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

@Component({
  selector: 'sample',
  template: `
    <ngx-siema [options]="options">
      <ngx-siema-slide *ngFor="let n of slides">{{ n }}</ngx-siema-slide>
    </ngx-siema>

    <ngx-siema [options]="options2">
      <ngx-siema-slide *ngFor="let n of slides">{{ n }}</ngx-siema-slide>
    </ngx-siema>

    <button type="button" (click)="next()">Next</button>
    <button type="button" (click)="prev()">Prev</button>
  `,
})
export class SampleComponent {

  options: NgxSiemaOptions = {
    selector: '.siema',
  };

  options2: NgxSiemaOptions = {
    selector: '.siema2',
  };

  slides: number[] = [1, 2, 3, 4, 5];

  constructor(private ngxSiemaService: NgxSiemaService) {
  }

  next() {
    this.ngxSiemaService.next(1)
      .subscribe((data: any) => {
        console.log(data);
      });
  }

  prev() {
    // Use the prev function only for ngx-siema instance with selector '.siema'
    this.ngxSiemaService.prev(1, '.siema')
      .subscribe((data: any) => {
        console.log(data);
      });
  }
}

License

MIT license.

You can’t perform that action at this time.