hs-simple-carousel

This is a simple carousel for angular7 and above

Installation

NPM

npm i hs-carousel-library

Usage

app.module.ts

import { SimpleCarouselModule } from 'hs-carousel-library';

@NgModule({  
  imports: [SimpleCarouselModule]
  ...
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';
import { CarouselItem } from './modules/simple-carousel/simple-carousel.module';

const IMAGES: CarouselItem[] = [
  {
    titulo: 'Llanura que',
    content: 'Llanura que que plata todo heridas con celeste, al los consume quemadas las nunca con..',
    imageUrl: 'https://dummyimage.com/1920x16:9/ff00ff/ffffff.png',
  },
  {
    titulo: 'that shrine',
    imageUrl: 'https://dummyimage.com/1920x16:9/ff0000/ffffff.png',
  },
  {
    titulo: 'That all might',
    content: 'That all might a who riot een long, to not that shrine.',
    imageUrl: 'https://dummyimage.com/800x16:9/00aa00/ffffff.png',
  }
];

@Component({
  selector: 'hs-root',
  templateUrl: './app.component.html',
  styles: [],
})
export class AppComponent {
  images = IMAGES;
}

app.component.html

<hs-simple-carousel 
  [autoplay]="true" 
  [interval]="10000" 
  [images]="images" 
  [animationType]="'fade'">
</hs-simple-carousel>

PROPERTIES

[autoplay] (boolean)

enable or disable the auto reproduction with interval indicated in property [interval].

[interval] (integer)

set the interval to change the slide.

[Images] (CarouselItem[])

collection of CarouselItem elements, this contains the URL of image, Title of slide, and content of slide.

[animationType] (string)

set the type of transition of slides, the posibles values is one of:

   'default'
   'bouncedown'
   'bounceup'
   'bounceleft'
   'bounceright'
   'slideup'
   'slidedown'
   'slideleft'
   'slideright'
   'fade'
   'fadedown'
   'fadeup'
   'fadeleft'
   'faderight'
   'flip'
   'flipx'
   'flipy'
   'rotate'
   'rotatedownleft'
   'rotatedownright'
   'rotateupleft'
   'rotateupright'

Interfaces

CarouselItem

export interface CarouselItem {
  titulo?: string;
  imageUrl: string;
  content?: string;
}

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT