Carousel

Looking for a smooth, modern carousel for your Angular projects? Meet Carousel, a lightweight and flexible component designed to fit perfectly into apps.

Key features:

✅ Seamless Integration: Built with 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, Carousel delivers a fast, polished experience.

Try it now and elevate your app’s UI! 🚀

Basic Carousel

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Carousel controls with custom position

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Carousel with fade effect

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

Card 9

Card 10

Card 11

API Reference

Properties for the ngs-carousel component.

Properties

Events

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 ngsCarouselNext component.

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

Properties for the ngsCarouselPrevious component.

Prop	Type	Default
carousel Сarousel 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.