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] (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')
    )