{"id":13637448,"url":"https://github.com/gbrlsnchs/material2-carousel","last_synced_at":"2025-10-05T05:30:31.800Z","repository":{"id":57127311,"uuid":"158738823","full_name":"gbrlsnchs/material2-carousel","owner":"gbrlsnchs","description":"A carousel component for Angular using Material","archived":true,"fork":false,"pushed_at":"2020-09-25T17:36:33.000Z","size":2674,"stargazers_count":85,"open_issues_count":36,"forks_count":118,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-01-21T00:07:17.631Z","etag":null,"topics":["angular","angular-material","aot-compatible","carousel","carousel-component","material"],"latest_commit_sha":null,"homepage":"https://gsr.dev/material2-carousel","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gbrlsnchs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-22T18:42:15.000Z","updated_at":"2024-01-18T00:34:04.000Z","dependencies_parsed_at":"2022-08-31T16:11:16.896Z","dependency_job_id":null,"html_url":"https://github.com/gbrlsnchs/material2-carousel","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gbrlsnchs%2Fmaterial2-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gbrlsnchs%2Fmaterial2-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gbrlsnchs%2Fmaterial2-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gbrlsnchs%2Fmaterial2-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gbrlsnchs","download_url":"https://codeload.github.com/gbrlsnchs/material2-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235365104,"owners_count":18978304,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-material","aot-compatible","carousel","carousel-component","material"],"created_at":"2024-08-02T00:01:17.587Z","updated_at":"2025-10-05T05:30:26.331Z","avatar_url":"https://github.com/gbrlsnchs.png","language":"TypeScript","funding_links":[],"categories":["Angular"],"sub_categories":["Components"],"readme":"# Material Carousel\n[![Build Status](https://travis-ci.org/gbrlsnchs/material2-carousel.svg?branch=master)](https://travis-ci.org/gbrlsnchs/material2-carousel)\n[![npm version](https://badge.fury.io/js/%40ngmodule%2Fmaterial-carousel.svg)](https://badge.fury.io/js/%40ngmodule%2Fmaterial-carousel)\n[![Live demo](https://img.shields.io/badge/demo-blue.svg)](https://gbrlsnchs.github.io/material2-carousel/)\n\n## NOTICE\nI no longer use Angular. By not using Angular anymore, it means I no longer use this component, what prevents me from pushing quality commits, doing assertive code reviews and being up-to-date with new Angular releases. I don't do open source for stars, I do to help people, so I don't want people that depend on this component to have a bad support.\n\nThat said, for the sake of the community, I suggest you to use [this fork](https://github.com/gabrielbusarello/material2-carousel) instead (thanks [gabrielbusarello](https://github.com/gabrielbusarello)!). There are a bunch of small issues to be solved and also some major ones but I'm sure someone actively using Angular will handle them with ease.\n\nThanks for the support and take care!\n\n## About\nThis package is a carousel component for Angular using Material Design.\n\nUntil `v1` is reached, breaking changes may be introduced.\n\n### Installing\n`npm install --save @ngmodule/material-carousel`\n\n### Importing\n```typescript\n//...\nimport { MatCarouselModule } from '@ngmodule/material-carousel';\n\n@NgModule({\n  // ...\n  imports: [\n    // ...\n    MatCarouselModule.forRoot(),\n    // ...\n  ]\n})\nexport class AppModule {}\n```\n\n## Usage\n### `MatCarouselComponent`\n```typescript\nimport { MatCarousel, MatCarouselComponent } from '@ngmodule/material-carousel';\n```\n```html\n\u003cmat-carousel\u003e\n  ...\n\u003c/mat-carousel\u003e\n```\n#### Attributes\n| Input                 |  Type              | Description                                                                | Default value     |\n| --------------------- | ------------------ | -------------------------------------------------------------------------- | :---------------: |\n| `timings`             | `string`           | Timings for slide animation.                                               | `'250ms ease-in'` |\n| `autoplay`            | `boolean`          | Enable automatic sliding.                                                  | `true`            |\n| `interval`            | `number`           | Autoplay's interval in milliseconds.                                       | `5000`            |\n| `loop`                | `boolean`          | Enable loop through arrows.                                                | `true`            |\n| `hideArrows`          | `boolean`          | Hide navigation arrows.                                                    | `false`           |\n| `hideIndicators`      | `boolean`          | Hide navigation indicators.                                                | `false`           |\n| `color`               | `ThemePalette`     | Color palette from Material.                                               | `'accent'`        |\n| `maxWidth`            | `string`           | Maximum width.                                                             | `'auto'`          |\n| `maintainAspectRatio` | `boolean`          | If true, use `proportion` to determine height, else `slideHeight` is used. | `true`            |\n| `proportion`          | `number`           | Height proportion compared to width.                                       | `25`              |\n| `slideHeight`         | `string`           | Explicit slide height. Used when maintainAspectRatio is false.             | `'100%'`          |\n| `slides`              | `number`           | Maximum amount of displayed slides.                                        |                   |\n| `useKeyboard`         | `boolean`          | Enable keyboard navigation.                                                | `true`            |\n| `useMouseWheel`       | `boolean`          | Enable navigation through mouse wheeling.                                  | `false`           |\n| `orientation`         | `Orientation`      | Orientation of the sliding panel.                                          | `'ltr'`           |\n| `svgIconOverrides`    | `SvgIconOverrides` | Override default carousel icons with registered SVG icons.                 |                   |\n\n#### Size Considerations and Recommendations\nBy default, `maintainAspectRatio` is true, which means height is controlled through `proportion`.\n\nIf you want to have a carousel with constant height (regardless of width), you must set `maintainAspectRatio` to false.\n\nBy 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`.\n\nPlay around with the [demo](https://gbrlsnchs.github.io/material2-carousel/) to see how you can use this carousel with or without explicit parent height.\n\n**With parent elements that have height:auto**\n* use `proportion` if you want a carousel that resizes responsively (this is the default configuration).\n* use `maintainAspectRatio=\"false\"` and a non-percentage `slideHeight` if you want a fixed height carousel.\n* **DO NOT** use relative (%) values for `slideHeight`; the carousel will not render.\n\n**With parent elements that have a set height**\n* use `maintainAspectRatio=\"false\"` if you want a fixed height carousel that fills the parent element (`slideHeight` is `100%` by default).\n* **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.\n* **DO NOT** use `proportion`; this will lead to gaps or unwanted overflow.\n\n### `MatCarouselSlideComponent`\n```typescript\nimport { MatCarouselSlide, MatCarouselSlideComponent } from '@ngmodule/material-carousel';\n```\n```html\n\u003cmat-carousel\u003e\n  \u003cmat-carousel-slide\u003e\n    ...\n  \u003c/mat-carousel-slide\u003e\n\u003c/mat-carousel\u003e\n```\n#### Attributes\n| Input          | Type      | Description                   | Default value |\n| -------------- | --------- | ----------------------------- | :-----------: |\n| `image`        | `string`  | Image displayed in the slide. |               |\n| `overlayColor` | `string`  | Color of the slide's overlay. | `'#00000040'` |\n| `hideOverlay`  | `boolean` | Toggle overlay on/off.        | `false`       |\n| `disabled`     | `boolean` | Skip slide when navigating.   | `false`       |\n\n## Contributing\n### How to help\n- For bugs and opinions, please [open an issue](https://github.com/gbrlsnchs/material2-carousel/issues/new)\n- For pushing changes, please [open a pull request](https://github.com/gbrlsnchs/material2-carousel/compare)\n\n### How to develop and test\n#### Testing\n`ng test carousel --watch false`\n#### Running the demo application\n`ng serve demo --source-map`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgbrlsnchs%2Fmaterial2-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgbrlsnchs%2Fmaterial2-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgbrlsnchs%2Fmaterial2-carousel/lists"}