AngularAnimatedCarousel
AngularAnimatedCarousel is a lightweight, touchable and responsive library to create a carousel animated for angular 7
Demo
demos available here
Install
You can install the package from our npm package
npm install --save angular-animated-carousel
Dependencies
npm install --save hammerjs animate.css angular-resize-event
Usage
First you need to provide the AngularAnimatedCarouselModule to your desired Module
import {AngularAnimatedCarouselModule} from 'angular-animated-carousel'; // In your App's module or Custom Module:@NgModule({ imports: [ AngularAnimatedCarouselModule ] })
Now, you can use AngularAnimatedCarouselModule as follow:
-
CAROUSEL STATIC WIDTH
<lng-carousel><lng-slide>... content of slide 1</lng-slide><lng-slide>... content of slide 2</lng-slide><lng-slide>... content of slide 3</lng-slide></lng-carousel> -
CAROUSEL DYNAMIC WIDTH
<lng-carousel-dynamic [height]="'380px'"><lng-slide>... content of slide 1</lng-slide><lng-slide>... content of slide 2</lng-slide><lng-slide>... content of slide 3</lng-slide></lng-carousel-dynamic>
API Documentation
-
CAROUSEL STATIC WIDTH ### Inputs
- showIndicators:
If true, allows to interact with carousel using keyboard 'arrow left' and 'arrow right'.
Type: boolean
Default value: true - showDualImage:
If true, two slides will be visible on the same time.
Type: boolean
Default value: true
### Outputs
- counterChange: Emits an event with the current counter value.
- showIndicators:
If true, allows to interact with carousel using keyboard 'arrow left' and 'arrow right'.
-
CAROUSEL DYNAMIC WIDTH ### Inputs
- height: Set the height of the carousel
Type: string
- height: Set the height of the carousel
Author
Laura Cristina Navarro Galvan
License
MIT