Angular component of the carousel, using the slider as a transition. This is a simple, clean and light alternative. It also does not need dependencies.
Compatible with previous versions of Angular, except AngularJS.
Use example (more examples).
<slider-carousel [images]="example.images"></slider-carousel>
npm install slider-carousel
import { SliderCarouselModule } from 'slider-carousel';
@NgModule({
imports: [
...,
SliderCarouselModule
],
declarations: [...],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
@import '~slider-carousel/slider-carousel.scss';
@include slider-carousel();
@import '~slider-carousel/slider-carousel.scss';
@include slider-carousel($defaultColor, $bgColor);
Name | Type | Description |
---|---|---|
images |
string[] or { lg: string, md?: string, sm?: string }[] |
Address list of the images to be displayed. He accept an array of object (with the sizes of each images) or a simple array of string. |
Name | Type | Default | Description |
---|---|---|---|
preview |
boolean |
true |
To open full image. (ex .: <... [preview]="true"></...> ). |
auto-size |
string |
'100%' |
Images are displayed each with their respective but responsive measurements. (ex .: <... [auto-size]="true"></...> ). |
height |
string |
'500px' |
Define a fixed height to container. (ex .: <... height="350px"></...> ). |
width |
string |
'100%' |
Define a fixed width to container. (ex .: <... width="300px"></...> ). |
max-width |
string |
'100%' |
Define a max width to container. (ex .: <... max-width="800px"></...> ). |