ngu-carousel
Angular Universal carousel
Note: This carousel doesn't include any css. go and customize css for buttons, items except ngucarousel and ngucarousel-inner
Demo
Demo available Here
Installation
Angular Version | ngu-carousel Version |
---|---|
Angular >= 10 | npm i --save @ngu/carousel@latest |
Angular = 9 | npm i --save @ngu/carousel@2.1.0 |
Angular < 9 | npm i --save @ngu/carousel@1.5.5 |
Installation
npm install @ngu/carousel --save
Include CarouselModule in your app module:
; @ {}
Now ngu-carousel supports touch with the help of hammerjs
Import hammerjs in main.ts
file
;
Then use in your component:
;; @ implements OnInit imgags = 'assets/bg.jpg' 'assets/car.png' 'assets/canberra.jpg' 'assets/holi.jpg' ; public carouselTileItems: Array<any> = 0 1 2 3 4 5; public carouselTiles = 0: 1: 2: 3: 4: 5: ; public carouselTile: NguCarouselConfig = grid: xs: 1 sm: 1 md: 3 lg: 3 xl:3 all: 0 slide: 3 speed: 250 point: visible: true load: 2 velocity: 0 touch: true easing: 'cubic-bezier(0, 0, 0.2, 1)' ; {} { thiscarouselTileItems; } public { // console.log(this.carouselTiles[j]); const len = thiscarouselTilesjlength; if len <= 30 for let i = len; i < len + 15; i++ thiscarouselTilesj; }
Input Interface
type: string; deviceType: DeviceType; token: string; items: number; load: number; deviceWidth: number; carouselWidth: number; itemWidth: number; visibleItems: ItemsControl; slideItems: number; itemWidthPer: number; itemLength: number; currentSlide: number; easing: string; speed: number; transform: Transfrom; loop: boolean; dexVal: number; touchTransform: number; touch: Touch; isEnd: boolean; isFirst: boolean; isLast: boolean; RTL: boolean; vertical: Vertical;; start: number; end: number; enabled: boolean; height: number; active?: boolean; swipe: string; velocity: number; grid: Transfrom; gridBreakpoints?: Breakpoints; slide?: number; speed?: number; interval?: CarouselInterval; animation?: Animate; point?: Point; type?: string; load?: number; custom?: Custom; loop?: boolean; touch?: boolean; easing?: string; RTL?: boolean; button?: NguButton; vertical?: Vertical; velocity?: number; xs: number; sm: number; md: number; lg: number; xl: number; all: number; ;;
Command | Type | Required | Description |
---|---|---|---|
grid |
Object | Yes | xs - mobile, sm - tablet, md - desktop, lg - large desktops, xl - extra large desktops, all - fixed width (When you use all make others 0 and vise versa) |
gridBreakpoints |
Object | optional | Determines the browser width in pixels that the grid displays the intended number of tiles. default: {sm: 768, md: 992, lg: 1200, xl: 1200} |
slide |
number | optional | It is used to slide the number items on click |
speed |
milli seconds | optional | It is used for time taken to slide the number items |
interval |
milli seconds | optional | It is used to make carousel auto slide with given value. interval defines the interval between slides |
load |
number | optional | is used to load the items similar to pagination. the carousel will tigger the carouslLoad function to load another set of items. it will help you to improve the performance of the app.(carouselLoad)="myfunc($event)" |
point.visible |
boolean | optional | It is used to indicate no. of slides and also shows the current active slide. |
point.hideOnSingleSlide |
boolean | optional | It is used to hide the point indicator when slide is less than one. |
touch |
boolean | optional | It is used to active touch support to the carousel. |
easing |
string | optional | It is used to define the easing style of the carousel. Only define the ease name without any timing like ease ,ease-in |
loop |
boolean | optional | It is used to loop the ngu-item | ngu-tile . It must be true for interval |
animation |
string | optional | It is used to animate the sliding items. currently it only supports lazy . more coming soon and also with custom css animation option |
custom |
string | optional | It is you to define the purpose of the carousel. currently it only supports banner . more coming soon and also with custom css animation option |
RTL |
boolean | optional | This option enable the rtl direction and act as rtl. By default it is ltr |
vertical.enabled |
boolean | optional | This option enable the vertical direction |
vertical.height |
boolean | optional | This option is used to set the height of the carousel |
Custom css for Point
This is HTML I'm using in the carousel. Add your own css according to this elements in pointStyles
. check below guide for more details.
inputs
is anInput
and It acceptsNguCarouselConfig
.onMove
is anOutput
which triggered on every slide before start and it will emit$event
asNguCarouselStore
object.carouselLoad
is anOutput
which triggered when slide reaches the end on items based on inputsload
.
Getstarted guide
Banner with Custom point style
;; @ implements OnInit { thiscarouselBanner = grid: xs: 1 sm: 1 md: 1 lg: 1 xl:1 all: 0 slide: 1 speed: 400 interval: timing: 3000 initialDelay: 1000 point: visible: true load: 2 loop: true touch: true ; } /* It will be triggered on every slide*/ { console; }
Banner with Vertical carousel
;; @ implements OnInit { thiscarouselBanner = grid: xs: 1 sm: 1 md: 1 lg: 1 xl:1 all: 0 slide: 1 speed: 400 interval: 4000 point: visible: true load: 2 loop: true touch: true // touch is not currently in active for vertical carousel, will enable it in future build vertical: enabled: true height: 400 ; } /* It will be triggered on every slide*/ { console; }
Tile with Carousel Control
;; @ implements OnInit private carouselToken: string; public carouselTileItems: Array<any>; public carouselTile: NguCarouselConfig; @ carousel: NguCarousel; { } { thiscarouselTileItems = 0 1 2 3 4 5 6 7 8 9 10 11 12 13; thiscarouselTile = grid: xs: 2 sm: 3 md: 3 lg: 5 xl:5 all: 0 slide: 2 speed: 400 animation: 'lazy' point: visible: true load: 2 touch: true easing: 'ease' } { thiscarouselToken = keytoken; } { thiscarousel; } { thiscarousel; } public { const len = thiscarouselTileItemslength if len <= 30 for let i = len; i < len + 10; i++ thiscarouselTileItems; } // carouselLoad will trigger this funnction when your load value reaches // it is helps to load the data by parts to increase the performance of the app // must use feature to all carousel
Tile with custom point style
;; @ implements OnInit public carouselTileItems: Array<any>; public carouselTile: NguCarousel; { thiscarouselTileItems = 0 1 2 3 4 5 6 7 8 9 10 11 12 13; thiscarouselTile = grid: xs: 2 sm: 3 md: 3 lg: 5 xl:5 all: 0 slide: 2 speed: 400 animation: 'lazy' point: visible: true pointStyles: ` .ngucarouselPoint { list-style-type: none; text-align: center; padding: 12px; margin: 0; white-space: nowrap; overflow: auto; box-sizing: border-box; } .ngucarouselPoint li { display: inline-block; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.55); padding: 4px; margin: 0 3px; transition-timing-function: cubic-bezier(.17, .67, .83, .67); transition: .4s; } .ngucarouselPoint li.active { background: #6b6b6b; transform: scale(1.2); } ` load: 2 touch: true easing: 'ease' } public { const len = thiscarouselTileItemslength if len <= 30 for let i = len; i < len + 10; i++ thiscarouselTileItems; } // carouselLoad will trigger this funnction when your load value reaches // it is helps to load the data by parts to increase the performance of the app // must use feature to all carousel
License
MIT license.