1.0.5 • Published 5 years ago

@the-wave-studio/ngx-flickity v1.0.5

Weekly downloads
-
License
-
Repository
-
Last release
5 years ago

ngx-flickity

Version

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.

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

0.1.15

5 years ago

0.1.14

5 years ago

0.1.13

5 years ago

0.1.12

5 years ago

0.1.11

5 years ago

0.1.10

5 years ago

0.1.8

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago

0.0.12

5 years ago

0.0.11

5 years ago

0.0.10

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago