Package Exports

ngx-img-crossfader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-img-crossfader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngx-img-crossfader

alt text

About

Angular image crossfader component.

Features

Image fit with conserved aspect ratio.
Inherit z-index from parent element.
Configure background color, idle time, transition time, transition fps, etc.

Instructions

Installation

npm install ngx-img-crossfader --save

Setup

add ngx-img-crossfader.css into project angular.json

"styles": [
  "styles.css",
  "node_modules/ngx-img-crossfader/ngx-img-crossfader.css"
]

Import NgxImgCrossfaderModule into app.module.ts and add to imports.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgxImgCrossfaderModule } from 'ngx-img-crossfader';

@NgModule({
  declarations: [
    AppComponent,
    DemoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxImgCrossfaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import NgxImgCrossfaderComponent in desired components.ts and template

...
import { NgxImgCrossfaderComponent } from 'ngx-img-crossfader';
...

...
<ngx-img-crossfader [images]="myImages"></ngx-img-crossfader>
...

Inputs

idleTimeMS: Time between transitions in MS, Default: 5000
transitionTimeMS: Transition time in MS. Default: 1000
transitionFPS: Transition frames per sec. Default: 26
images: Array of HTMLImageElements to crossfade
backgroundColor: Background color. Default: 'rgba(0,0,0,1.0)';