Carousel
Looking for a smooth, modern carousel for your Angular projects? Meet Angular Material Carousel, a lightweight and flexible component designed to fit perfectly into Angular Material apps.
- ✅ Seamless Integration: Built with Angular Material and Tailwind, it blends right in with your app's design.
- ✅ Easy to Use: Simple API for developers of any skill level.
- ✅ Customizable: Tailor it to match your style with ease.
Whether you need to showcase images, cards, or any content, Angular Material Carousel delivers a fast, polished experience.
Try it now and elevate your app’s UI! 🚀
Basic Carousel
Carousel controls with custom position
Carousel with fade effect
API Reference
Properties for the emr-carousel component.
| Prop | Type | Default |
|---|---|---|
fade Adds smooth opacity to left and right | boolean | false |
snapToCenter Enables or disables the automatic snapping of a card to the center of the viewport after dragging ends (if an inertial flick did not occur). | boolean | true |
snapDebounceTime The delay in milliseconds after the mouse button is released before starting the snapping animation (to the nearest or next card) or the "rubber band" return animation. | number | 50 |
snapDuration The duration in milliseconds for all animations performed by the component: snapping to a card and the "rubber band" return. | number | 300 |
resistanceFactor Adjusts the "feel" and amount of visual displacement when attempting to pull content past the edge positions. | number | 0.5 |
velocityThreshold The threshold velocity (in pixels per millisecond) of the mouse movement at the moment the button is released. If the velocity exceeds this threshold, the carousel will switch to the next card in the direction of movement (inertial flick) instead of the nearest one to the center. | number | 0.5 |
visibilityDebounceTime The delay in milliseconds after the last scroll event (not caused by dragging) before updating the visibility CSS classes (is-in-view, is-spanned) on the cards. | number | 100 |
Properties for the emrCarouselNext component.
| Prop | Type | Default |
|---|---|---|
carousel Сarousel instance if the control is external | CarouselComponent | – |
Properties for the emrCarouselPrevious component.
| Prop | Type | Default |
|---|---|---|
carousel Сarousel instance if the control is external | CarouselComponent | – |
emr-carousel-card component - adds an carousel item.
emrCarouselControls directive - adds a controls container.
emrCarouselNext directive - control that moves to the next item in the carousel.
emrCarouselPrevious directive - control that moves to the previous item in the carousel.