angular4-carousel v3.1.8
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
<div style="width: 800px; height: 400px">
<carousel [sources]="imageSources" [config]="config"></carousel>
</div>
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.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
(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.SLIDE_OVERLAP, AnimationConfig.SLIDE
autoplay: values: false, true
autoplayDelay: values: number
stopAutoplayMinWidth: values: number 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')
)
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago