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

Failed to load crossfader preview gif

https://www.npmjs.com/package/ngx-img-crossfader

About

Simple to use Angular image crossfader component.

Features

Image fit with preserved aspect ratio.
Inherit z-index from parent element.
Configure background color, idle time, transition time, etc.
Able to add images dynamically.
Auto-advance or advance and step back manually.

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
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxImgCrossfaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import NgxImgCrossfaderComponent in desired components and template

import { Component, ViewChild } from '@angular/core';
import { NgxImgCrossfaderComponent } from 'ngx-img-crossfader'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {  
  myImageSources = [
    './my/image/location/image.jpg',
    'www.my/image/url.com/anotherImage.png'
  ];

  @ViewChild('myCrossfader') myCrossfader: NgxImgCrossfaderComponent;

  constructor() { }
  
  next() { myCrossfader.stepForaward() }
  back() { myCrossfader.stepBackward() }
}

...
<ngx-img-crossfader [imageSources]="myImageSources" #myCrossfader></ngx-img-crossfader>
<button (click)="back()">Back</button>
<button (click)="next()">Next</button>
...

Inputs

idleTimeMS: Time between transitions in MS, Default: 5000.
transitionTimeMS: Transition time in MS. Default: 1000.
imageSources: Array<string> of image sources to crossfade. Default: [].
backgroundColor: Background color. Default: 'rgba(0,0,0,1.0)'.
autoAdvance: boolean. step forward automatically. Default: true.