Carousel

The Carousel component shows a horizontal, draggable row of cards or repeated content. Use it when users need to browse related items in limited space, such as previews, products, media, recommendations, or onboarding panels.

Use it for:

Horizontal item browsing: Show peer items that can be dragged or scrolled.
Card and media strips: Present previews, products, recommendations, or compact panels.
Carousel controls: Add previous and next buttons inside or outside the carousel.
Active index tracking: React when the centered or active card changes.

Do not use Carousel for page section switching, numeric values, fullscreen galleries, vertical lists, tables, grids, or step-by-step workflows.

API Reference

Properties for the ngs-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

Events

Event	Description	Output type
indexChange	An event that fires and emits the 0-based index of the card that has become active (closest to the center).	number

Properties for the ngsCarouselNext component.

Prop	Type	Default
carousel Carousel instance if the control is external	Carousel	–

Properties for the ngsCarouselPrevious component.

Prop	Type	Default
carousel Carousel instance if the control is external	Carousel	–

ngs-carousel-card component - adds an carousel item.

ngsCarouselControls directive - adds a controls container.

ngsCarouselNext directive - control that moves to the next item in the carousel.

ngsCarouselPrevious directive - control that moves to the previous item in the carousel.

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates

Carousel

API Reference

Events

Source code, templates, and commercial support

Build the surrounding workflow