slider-carousel

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.

Usage no npm install needed!

<script type="module">
  import sliderCarousel from 'https://cdn.skypack.dev/slider-carousel';
</script>

README

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: