hs-simple-carousel v1.0.0

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

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

interval

set the interval to change the slide.

Images

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

animationType

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