A Carousel Component For Angular Using Material 2

material2-carousel package is a carousel component for Angular using Material Design.

carousel for angular, angular 6 carousel multiple items, angular material carousel, angular 8 carousel slider example, angular responsive carousel example

Mobile-friendly Auto Background Carousel Element | Suwa.js

How to make use of it:

Installation

npm install --save @ngmodule/material-carousel

Usage

//...
import { MatCarouselModule } from '@ngmodule/material-carousel';

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

import { MatCarousel, MatCarouselComponent } from '@ngmodule/material-carousel';

<mat-carousel>
  ...
</mat-carousel>

Attributes

Input	Type	Description	Default value
`timings`	`string`	Timings for slide animation.	`'250ms ease-in'`
`autoplay`	`boolean`	Enable automatic sliding.	`true`
`interval`	`number`	Autoplay’s interval in milliseconds.	`5000`
`loop`	`boolean`	Enable loop through arrows.	`true`
`hideArrows`	`boolean`	Hide navigation arrows.	`false`
`hideIndicators`	`boolean`	Hide navigation indicators.	`false`
`color`	`ThemePalette`	Color palette from Material.	`'accent'`
`maxWidth`	`string`	Maximum width.	`'auto'`
`maintainAspectRatio`	`boolean`	If true, use `proportion` to determine height, else `slideHeight` is used.	`true`
`proportion`	`number`	Height proportion compared to width.	`25`
`slideHeight`	`string`	Explicit slide height. Used when maintainAspectRatio is false.	`'100%'`
`slides`	`number`	Maximum amount of displayed slides.
`useKeyboard`	`boolean`	Enable keyboard navigation.	`true`
`useMouseWheel`	`boolean`	Enable navigation through mouse wheeling.	`false`
`orientation`	`Orientation`	Orientation of the sliding panel.	`'ltr'`
`svgIconOverrides`	`SvgIconOverrides`	Override default carousel icons with registered SVG icons.