ngx-img-crossfader
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.