@the-wave-studio/ngx-flickity
v1.0.5
Published
Angular component for Flickity slider
Downloads
69
Maintainers
Readme
ngx-flickity
A modern Angular module that exposes a component to create and control flickity slider instances.
Installation
npm i -s @the-wave-studio/ngx-flickity
Usage
Import TwNgxFlickityModule
into your app's modules:
import {TwNgxFlickityModule} from "@the-wave-studio/ngx-flickity";
@NgModule({
imports: [
// ..., other imports
TwNgxFlickityModule
]
})
Then you can use the component in your app, take care of watchItems
@Input is mandatory for correctly update the slider onChanges
:
<section class="FlickitySlider">
<tw-flickity-slider [watchItems]="slides"
*ngIf="slides?.length"
>
<div *ngFor="let slide of slides">{{slide}}</div>
</tw-flickity-slider>
</section>
Configuration
You can configure the component with the following attributes:
- [disabled]: boolean (default false) - If set true destroy/negate the activation of the component's current flickity instance.
- [config]: TWFlickityConfig (default {flickityOptions:{watchCSS:true}}) entrypoint for custom configuration.
Here you have a TWFlickityConfig model representation:
type TWFlickityConfig = {
flickityOptions: object; // flickity custom options ref: https://flickity.metafizzy.co/options.html
sliderClass: string; // use for adding class to the slider wrapper element
}
Events
There is an EventEmitter
for each Flickity event
, you can see the entire list in the flickity site.
Sample code
<app-flickity-slider [watchItems]="items"
*ngIf="items?.length"
>
<div class="col-12 col-md-6 col-lg-3"
*ngFor="let item of items"
(onChange)="currentSlideChanged($event)"
>
<div class="feature">
<div class="icon">
<i [class]="item['icon-class']"></i>
</div>
<p class="description">{{ item.description}}</p>
</div>
</div>
</app-flickity-slider>
Currently emitted events:
- onReady
- onChange
- onSelect
- onSettle
- onScroll
- onDragStart
- onDragMove
- onDragEnd
- onPointerDown
- onPointerMove
- onPointerEnd
- onStaticClick
- onLazyLoad
- onBgLazyLoad
- onFullscreenChange
The Author
We are The Wave Studio a premium digital studio, contact us for professional digital transformation projects.