angular-animated-carousel

AngularAnimatedCarousel is a lightweight, touchable and responsive library to create a carousel animated for angular 7

Usage no npm install needed!

<script type="module">
  import angularAnimatedCarousel from 'https://cdn.skypack.dev/angular-animated-carousel';
</script>

README

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