angular4-carousel

Configurable angular2/4 carousel

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular4-carousel
22143.1.87 years ago7 years agoMinified + gzip package size for angular4-carousel in KB

Readme

Angular4Carousel
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 ```
sources="imageSources" config="config">
```
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')
)
```