angular4-carousel

Configurable angular carousel

Demo

http://angular4-carousel.bitballoon.com/

Getting started

npm i --save angular4-carousel Add following lines into your module: ``` import { CarouselModule } from 'angular4-carousel'; ``` add carousel in your module imports section
``` imports: CarouselModule ```
component template: add carousel and container ``` ```
component ts: ``` import { ICarouselConfig, AnimationConfig } from 'angular4-carousel'; ``` and add sources and config to component class ``` public imageSources: string =

'path to img1',

'path to img2',

'path to img3'

; public config: ICarouselConfig = {

verifyBeforeLoad: true,

log: false,

animation: true,

animationType: AnimationConfig.SLIDE,

autoplay: true,

autoplayDelay: 2000,

stopAutoplayMinWidth: 768

}; ``` Add font awesome to your project. ``` ``` (you can add font awesome using CLI or directly or CDN, or whatever you want, or redefine default styles for arrows ;) with pure CSS )

Config

verifyBeforeLoad
values: false, true
If true, each image will render to view if and when load. If false, all images render as soon as carousel init. log:
values: false, true
Log to console on image load success or error animation:
values: false, true
animationType:
value: AnimationConfig.APPEAR, AnimationConfig.SLIDEOVERLAP, AnimationConfig.SLIDE autoplay:
values: false, true autoplayDelay:
values: number (ms) stopAutoplayMinWidth:
values: number (px) Prop for preventing autoplay on mobile devices. If window width (w/o scroll) <= value, autoplay will stop.

API

You can catch event on image loaded
Add following lines into your component ts file: Import: ` import { CarouselService } from 'angular4-carousel'; ` in constructor: ` constructor (private x: CarouselService) {} ` and use:
``` this.x.onImageLoad().subscribe(

(src) => console.log(src + ' - loaded'),

(src) => console.log(src + ' - error'),

() => console.log('all imgs loaded')

)

```