0.0.1 • Published 5 years ago
angular-magic-breadcrum v0.0.1
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: trueOutputs
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
0.0.1
5 years ago