slider-carousel | Angular 10

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>

Usage

Install

npm install slider-carousel

Import into Module

import { SliderCarouselModule } from 'slider-carousel';

@NgModule({
  imports: [
    ...,
    SliderCarouselModule
  ],
  declarations: [...],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import into style.scss file application.

@import '~slider-carousel/slider-carousel.scss';
@include slider-carousel();

Or import with colors (default color and background color)

@import '~slider-carousel/slider-carousel.scss';
@include slider-carousel($defaultColor, $bgColor);

API

Inputs/Outputs (Required)

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.

Inputs/Outputs (Optional)

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"></...>).

Understand images sizes

The sm is thumbnail and md is carousel image:

The lg is full image on preview mode: