# @ngmodule/material-carousel > Carousel component for Angular using Material Design. Latest version **0.6.0** (published 2020-01-16) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @ngmodule/material-carousel pnpm add @ngmodule/material-carousel yarn add @ngmodule/material-carousel bun add @ngmodule/material-carousel ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 0.6.0 | | Published | 2020-01-16 | | First published | 2018-11-27 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 465.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 84 | | Author | Gabriel Sanches | | Maintainers | gbrlsnchs | | Keywords | angular, material, carousel, component, module | ## Links - npm: https://www.npmjs.com/package/@ngmodule/material-carousel - Repository: https://github.com/gbrlsnchs/material2-carousel - Homepage: https://gbrlsnchs.github.io/material2-carousel/ - Issues: https://github.com/gbrlsnchs/material2-carousel/issues - npm.io page: https://npm.io/package/@ngmodule/material-carousel ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^1.9.0 ## Alternatives - [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads - [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads - [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads - [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads - [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads ## Recent versions - 0.6.0 (latest) — 2020-01-16 - 0.5.1 — 2019-10-03 - 0.5.0 — 2019-07-24 - 0.4.0 — 2019-06-03 - 0.3.1 — 2018-12-04 - 0.2.1 — 2018-11-28 - 0.2.0 — 2018-11-28 - 0.1.3 — 2018-11-27 - 0.1.2 — 2018-11-27 - 0.1.1 — 2018-11-27 - 0.1.0 — 2018-11-27 ## README # Material Carousel [![Build Status](https://travis-ci.org/gbrlsnchs/material2-carousel.svg?branch=master)](https://travis-ci.org/gbrlsnchs/material2-carousel) [![npm version](https://badge.fury.io/js/%40ngmodule%2Fmaterial-carousel.svg)](https://badge.fury.io/js/%40ngmodule%2Fmaterial-carousel) [![Live demo](https://img.shields.io/badge/demo-blue.svg)](https://gbrlsnchs.github.io/material2-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 ```typescript //... import { MatCarouselModule } from '@ngmodule/material-carousel'; @NgModule({ // ... imports: [ // ... MatCarouselModule.forRoot(), // ... ] }) export class AppModule {} ``` ## Usage ### `MatCarouselComponent` ```typescript import { MatCarousel, MatCarouselComponent } from '@ngmodule/material-carousel'; ``` ```html ... ``` #### 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. | | #### Size Considerations and Recommendations By default, `maintainAspectRatio` is true, which means height is controlled through `proportion`. If you want to have a carousel with constant height (regardless of width), you must set `maintainAspectRatio` to false. By default, `slideHeight` is set to `100%`, which will not work if the parent element height isn't defined (i.e. relative heights do not work if the parent height is `auto`). In that case you could pass a valid css string for `slideHeight`. You can use any valid css height string like `100px` or `25vh`. Play around with the [demo](https://gbrlsnchs.github.io/material2-carousel/) to see how you can use this carousel with or without explicit parent height. **With parent elements that have height:auto** * use `proportion` if you want a carousel that resizes responsively (this is the default configuration). * use `maintainAspectRatio="false"` and a non-percentage `slideHeight` if you want a fixed height carousel. * **DO NOT** use relative (%) values for `slideHeight`; the carousel will not render. **With parent elements that have a set height** * use `maintainAspectRatio="false"` if you want a fixed height carousel that fills the parent element (`slideHeight` is `100%` by default). * **DO NOT** use `maintainAspectRatio="false"` **and** `slideHeight` (unless `slideHeight="100%"`); the carousel will not render correctly because the buttons and indicators will be positioned with respect to the parent. * **DO NOT** use `proportion`; this will lead to gaps or unwanted overflow. ### `MatCarouselSlideComponent` ```typescript import { MatCarouselSlide, MatCarouselSlideComponent } from '@ngmodule/material-carousel'; ``` ```html ... ``` #### 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](https://github.com/gbrlsnchs/material2-carousel/issues/new) - For pushing changes, please [open a pull request](https://github.com/gbrlsnchs/material2-carousel/compare) ### How to develop and test #### Testing `ng test carousel --watch false` #### Running the demo application `ng serve demo --source-map` --- _Source: https://npm.io/package/@ngmodule/material-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._