README.md

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.

• CAROUSEL DYNAMIC WIDTH

  Inputs

  • height: Set the height of the carousel
    Type: string

Author

Laura Cristina Navarro Galvan

License

MIT