Material Carousel

About

This package is a carousel component for Angular using Material Design. With support for sprites image maps.

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.forRoot(),
    // ...
  ]
})
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'
svgIconOverrides	SvgIconOverrides	Override default carousel icons with registered SVG icons.

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
spriteOffsetX	number	Sprite pixel offset X.	0
spriteOffsetX	number	Sprite pixel offset Y.	0
spriteWidth	number	Sprite width in pixels.	0
spriteHeight	number	Sprite height in pixels.	0
spriteCenter	boolean	Center sprite.	true

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