This is a simple carousel for angular7 and above
npm i hs-carousel-library
import { SimpleCarouselModule } from 'hs-carousel-library';
@NgModule({
imports: [SimpleCarouselModule]
...
})
export class AppModule {}
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;
}
<hs-simple-carousel
[autoplay]="true"
[interval]="10000"
[images]="images"
[animationType]="'fade'">
</hs-simple-carousel>
enable or disable the auto reproduction with interval indicated in property [interval].
set the interval to change the slide.
collection of CarouselItem elements, this contains the URL of image, Title of slide, and content of slide.
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'
export interface CarouselItem {
titulo?: string;
imageUrl: string;
content?: string;
}
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.