kit-slide

README

Scope

  • Carousel, image slider
  • Tabs component

API

[class] KitSlideHostService

@Injectable

Usage

Provide KitSlideHostService on a component and add *kitSlide to slides.

<div (click)="rotate()">
  <div *kitSlide>Slide 1</div>
  <div *kitSlide>Slide 2</div>
  <div *kitSlide>Slide 3</div>
</div>

Use KitSlideHostService for state changing.

providers[KitSlideHostService],
...
constructor(private slideHost: KitSlideHostService) {
}
...
rotate() {
  this.slideHost.rotate();
}

Example

Members

SignatureDescription
activateFirst = true

Activate first slide on init.

get active(): KitSlideId

Get active slide id.

set active(id: KitSlideId)

Set active side by id.

set activeInitial(id: KitSlideId)

Set active and emit only 'initial' direction.

get activeChanges(): Observable<KitSlideId>

Get Observable with active slide id.

get directionChanges(): Observable<KitSlideDirection>

Get Observable with direction of slide changing (next, prev).

addId(id: KitSlideId)

Register slide.

deleteId(id: KitSlideId)

Delete slide.

genId(): number

Generate slide id.

next(cycle = false)

Activate next slide.

prev(cycle = false)

Activate prev slide.

[class] KitSlideModule

@NgModule

Exports:[ KitSlideDirective, ]

[class] KitSlideDirective

@Directive

Selector:'[kitSlide]'

Structure directive that display slides.

Members

SignatureDescription
@Input() kitSlide: KitSlideId = null

Slide id.

If not set will be generated automatically.