mr-carousel v0.1.0

Angular Carousel

A simple and lightweight Angular (12+) Carousel Component.

Installation

Install mr-carousel with npm:

npm install mr-carousel --save

or with yarn:

yarn add mr-carousel

Usage/Examples

Basic setup

app.module.ts:

import { CarouselModule } from 'mr-carousel';

@NgModule({
  // ...
  imports: [
    // ...
    CarouselModule,
  ],
})
export class AppModule { }

app.component.html:

<mr-carousel>
  <ng-template *mrCarouselSlide>
    Slide 1
  </ng-template>
  <ng-template *mrCarouselSlide>
    Slide 2
  </ng-template>
  <ng-template *mrCarouselSlide>
    Slide 3
  </ng-template>
</mr-carousel>

Import a theme:

@import "~mr-carousel/themes/stripes.css";

/* or */

@import "~mr-carousel/themes/dots.css";

You can also create your own theme to match the theme of your website/app. More on that in the Theming section.

Bullets (default: true)

Setting the [bullets] option to false hides the bullets from the carousel.

<mr-carousel [bullets]="false">
  <!-- Slides -->
</mr-carousel>

Infinite (default: false)

Using the [infinite] option the carousel can be slide through infinitely.

<mr-carousel [infinite]="true">
  <!-- Slides -->
</mr-carousel>

Auto (default: false)

Setting the [auto] option to true lets the carousel cycle through the slides automatically.

<mr-carousel [auto]="true">
  <!-- Slides -->
</mr-carousel>

Duration (default: 5000, minimum: 500)

This setting describes for how long each slide is visible in milliseconds (when using the [auto]="true" mode).

<mr-carousel [duration]="6000">
  <!-- Slides -->
</mr-carousel>

Theming

Create your own theme by styling at least the bullets (the stripes theme is used as an example below):

.carousel__bullet {
  width: 2rem;
  height: 0.2rem;
  background: #64748B;
  opacity: .25;
}

.carousel__bullet:hover {
  opacity: .6;
}

.carousel__bullet.carousel__bullet--active {
  opacity: 1;
  background: #6366F1;
}