k2yoon / material2-carousel

A carousel component for Angular using Material

Material Carousel

About

This package is a carousel component for Angular using Material Design.

Until v1 is reached, breaking changes may be introduced.

Installing

npm install --save @ngmodule/material-carousel

Importing

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

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

Usage

MatCarouselComponent

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'
proportion	number	Height proportion compared to width.	25
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'

MatCarouselSlideComponent

import { MatCarouselSlide, MatCarouselSlideComponent } from '@ngmodule/material-carousel';

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

Attributes

Input	Type	Description	Default value
image	string	Image displayed in the slide.
overlayColor	string	Color of the slide's overlay.	'#00000040'
hideOverlay	boolean	Toggle overlay on/off.	false
disabled	boolean	Skip slide when navigating.	false

Contributing

How to help

• For bugs and opinions, please open an issue
• For pushing changes, please open a pull request

How to develop and test

Testing

ng test carousel --watch false

Running the demo application

ng serve demo --source-map