{"id":13729415,"url":"https://github.com/uiuniversal/ngu-carousel","last_synced_at":"2025-05-14T16:02:45.239Z","repository":{"id":40359678,"uuid":"109927529","full_name":"uiuniversal/ngu-carousel","owner":"uiuniversal","description":"Angular Universal carousel","archived":false,"fork":false,"pushed_at":"2025-03-09T03:24:52.000Z","size":3499,"stargazers_count":340,"open_issues_count":5,"forks_count":106,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-11T17:13:39.850Z","etag":null,"topics":["angular","angular2","angularuniversal","banner","carousel","ngu-carousel","slide","tile"],"latest_commit_sha":null,"homepage":"https://ngu-carousel.netlify.app","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/uiuniversal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-08T04:26:33.000Z","updated_at":"2025-03-14T15:14:38.000Z","dependencies_parsed_at":"2024-01-02T19:24:09.735Z","dependency_job_id":"8f5488e0-bc03-48f9-9d50-c5b821033d38","html_url":"https://github.com/uiuniversal/ngu-carousel","commit_stats":{"total_commits":263,"total_committers":33,"mean_commits":7.96969696969697,"dds":0.6920152091254752,"last_synced_commit":"2b63b1cef8e3c5ff4ba54a8f98fdbb24f27d53e9"},"previous_names":["sheikalthaf/ngu-carousel"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiuniversal%2Fngu-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiuniversal%2Fngu-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiuniversal%2Fngu-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiuniversal%2Fngu-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uiuniversal","download_url":"https://codeload.github.com/uiuniversal/ngu-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631668,"owners_count":21136554,"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","angular2","angularuniversal","banner","carousel","ngu-carousel","slide","tile"],"created_at":"2024-08-03T02:00:59.891Z","updated_at":"2025-04-12T20:39:03.480Z","avatar_url":"https://github.com/uiuniversal.png","language":"TypeScript","readme":"# ngu-carousel\n\n[![npm downloads](https://img.shields.io/npm/dt/@ngu/carousel?label=npm%20downloads)](https://www.npmjs.com/package/@ngu/carousel)\n\n[![npm version](https://badge.fury.io/js/%40ngu%2Fcarousel.svg)](https://badge.fury.io/js/%40ngu%2Fcarousel)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-19-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\nAngular Universal carousel\n\n`Note: This carousel doesn't include any CSS. go and customize CSS for buttons, items except ngucarousel and ngucarousel-inner`\n\n## Demo\n\nDemo available in Stackblitz [Here](https://stackblitz.com/edit/ngu-carousel-ng6)\n\nDemo available [Here](https://ngu-carousel.netlify.app)\n\n## Installation\n\n`ngu-carousel` supports touch actions and requires `hammerjs` to be installed before the `ngu-carousel` is installed.\n\n| Angular Version          | ngu-carousel Version               |\n| ------------------------ | ---------------------------------- |\n| Angular \u003e= 19            | `npm i --save @ngu/carousel@19`    |\n| Angular \u003e= 18            | `npm i --save @ngu/carousel@18`    |\n| Angular \u003e= 17            | `npm i --save @ngu/carousel@9.0.0` |\n| Angular \u003e= 16 standalone | `npm i --save @ngu/carousel@8.0.0` |\n| Angular \u003e= 16            | `npm i --save @ngu/carousel@7.2.0` |\n| Angular \u003e= 15            | `npm i --save @ngu/carousel@7.0.0` |\n| Angular \u003e= 14            | `npm i --save @ngu/carousel@6.0.0` |\n| Angular \u003e= 13            | `npm i --save @ngu/carousel@5.0.0` |\n| Angular \u003e= 12            | `npm i --save @ngu/carousel@4.0.0` |\n| Angular \u003e= 10            | `npm i --save @ngu/carousel@3.0.2` |\n| Angular = 9              | `npm i --save @ngu/carousel@2.1.0` |\n| Angular \u003c 9              | `npm i --save @ngu/carousel@1.5.5` |\n\n## Usage\n\n1. Include Carousel needed parts in your module or component (all carousel components and directives are standalone):\n\n```typescript\nimport {\n  NguCarousel,\n  NguCarouselDefDirective,\n  NguCarouselNextDirective,\n  NguCarouselPrevDirective,\n  NguItemComponent\n} from '@ngu/carousel';\n\n@NgModule({\n  imports: [\n    NguCarousel,\n    NguTileComponent,\n    NguCarousel,\n    NguCarouselDefDirective,\n    NguCarouselNextDirective,\n    NguCarouselPrevDirective,\n    NguItemComponent\n  ]\n})\nexport class AppModule {}\n\nOR;\n\n@Component({\n  imports: [\n    NguCarousel,\n    NguTileComponent,\n    NguCarousel,\n    NguCarouselDefDirective,\n    NguCarouselNextDirective,\n    NguCarouselPrevDirective,\n    NguItemComponent\n  ],\n  standalone: true\n})\nexport class AppComponent {}\n```\n\n2. Then use in your component:\n\n```javascript\nimport { Component, OnInit } from '@angular/core';\nimport { NguCarouselConfig } from '@ngu/carousel';\n\n@Component({\n  selector: 'sample',\n  template: `\n    \u003cngu-carousel #myCarousel [inputs]=\"carouselTile\" [dataSource]=\"carouselTileItems\"\u003e\n  \u003cngu-tile *nguCarouselDef=\"let item; let i = index\"\u003e\n\n    \u003cngu-carousel #myCarousel [inputs]=\"carouselTile\" (carouselLoad)=\"carouselTileLoad(i)\" [dataSource]=\"carouselTiles[i]\"\u003e\n      \u003cngu-tile *nguCarouselDef=\"let item; let j = index\"\u003e\n        \u003cdiv class=\"tile\" [style.background]=\"'url(' + item + ')'\" style=\"min-height: 200px\"\u003e\n          \u003ch1\u003e{{j}}\u003c/h1\u003e\n        \u003c/div\u003e\n      \u003c/ngu-tile\u003e\n      \u003cbutton NguCarouselPrev class=\"leftRs\" [style.opacity]=\"myCarousel.isFirst() ? 0.5:1\"\u003e\u0026lt;\u003c/button\u003e\n      \u003cbutton NguCarouselNext class=\"rightRs\" [style.opacity]=\"myCarousel.isLast() ? 0.5:1\"\u003e\u0026gt;\u003c/button\u003e\n      \u003cul class=\"myPoint\" NguCarouselPoint\u003e\n        \u003cli *ngFor=\"let j of myCarousel.pointNumbers(); let j = index\" [class.active]=\"j==myCarousel.activePoint()\" (click)=\"myCarousel.moveTo(j)\"\n          [style.background]=\"'url(' + carouselTileItems[j] + ')'\"\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/ngu-carousel\u003e\n\n  \u003c/ngu-tile\u003e\n  \u003cbutton NguCarouselPrev class=\"leftRs\" [style.opacity]=\"myCarousel.isFirst() ? 0.5:1\"\u003e\u0026lt;\u003c/button\u003e\n  \u003cbutton NguCarouselNext class=\"rightRs\" [style.opacity]=\"myCarousel.isLast() ? 0.5:1\"\u003e\u0026gt;\u003c/button\u003e\n  \u003cul class=\"myPoint\" NguCarouselPoint\u003e\n    \u003cli *ngFor=\"let i of myCarousel.pointNumbers(); let i = index\" [class.active]=\"i==myCarousel.activePoint()\" (click)=\"myCarousel.moveTo(i)\"\n      [style.background]=\"'url(' + carouselTileItems[i] + ')'\"\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/ngu-carousel\u003e\n\n  `,\n})\nexport class SampleComponent implements OnInit {\n  imgags = [\n    'assets/bg.jpg',\n    'assets/car.png',\n    'assets/canberra.jpg',\n    'assets/holi.jpg'\n  ];\n  public carouselTileItems: Array\u003cany\u003e = [0, 1, 2, 3, 4, 5];\n  public carouselTiles = {\n    0: [],\n    1: [],\n    2: [],\n    3: [],\n    4: [],\n    5: []\n  };\n  public carouselTile: NguCarouselConfig = {\n    grid: { xs: 1, sm: 1, md: 3, lg: 3, all: 0 },\n    slide: 3,\n    speed: 250,\n    point: {\n      visible: true\n    },\n    load: 2,\n    velocity: 0,\n    touch: true,\n    easing: 'cubic-bezier(0, 0, 0.2, 1)'\n  };\n  constructor() {}\n\n  ngOnInit() {\n    this.carouselTileItems.forEach(el =\u003e {\n      this.carouselTileLoad(el);\n    });\n  }\n\n  public carouselTileLoad(j) {\n    // console.log(this.carouselTiles[j]);\n    const len = this.carouselTiles[j].length;\n    if (len \u003c= 30) {\n      for (let i = len; i \u003c len + 15; i++) {\n        this.carouselTiles[j].push(\n          this.imgags[Math.floor(Math.random() * this.imgags.length)]\n        );\n      }\n    }\n  }\n}\n```\n\n## Input Interface\n\n```javascript\nexport class NguCarouselStore {\n  type: string;\n  deviceType: DeviceType;\n  token: string;\n  items: number;\n  load: number;\n  deviceWidth: number;\n  carouselWidth: number;\n  itemWidth: number;\n  visibleItems: ItemsControl;\n  slideItems: number;\n  itemWidthPer: number;\n  itemLength: number;\n  currentSlide: number;\n  easing: string;\n  speed: number;\n  transform: Transfrom;\n  loop: boolean;\n  dexVal: number;\n  touchTransform: number;\n  touch: Touch;\n  isEnd: boolean;\n  isFirst: boolean;\n  isLast: boolean;\n  RTL: boolean;\n  vertical: Vertical;\n}\nexport type DeviceType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'all';\n\nexport class ItemsControl {\n  start: number;\n  end: number;\n}\n\nexport class Vertical {\n  enabled: boolean;\n  height: number;\n}\n\nexport class Touch {\n  active?: boolean;\n  swipe: string;\n  velocity: number;\n}\n\nexport class NguCarouselConfig {\n  grid: Transfrom;\n  gridBreakpoints?: Breakpoints;\n  slide?: number;\n  speed?: number;\n  interval?: CarouselInterval;\n  animation?: Animate;\n  point?: Point;\n  type?: string;\n  load?: number;\n  custom?: Custom;\n  loop?: boolean;\n  touch?: boolean;\n  easing?: string;\n  RTL?: boolean;\n  button?: NguButton;\n  vertical?: Vertical;\n  velocity?: number;\n}\n\nexport class Grid {\n  xs: number;\n  sm: number;\n  md: number;\n  lg: number;\n  xl: number;\n  all: number;\n}\n\nexport interface Point {\n  visible: boolean;\n  hideOnSingleSlide?: boolean;\n}\n\nexport type Custom = 'banner';\nexport type Animate = 'lazy';\n```\n\n| Command                   | Type         | Required | Description                                                                                                                                                                                                                        |\n| ------------------------- | ------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `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 vice versa)                                              |\n| `gridBreakpoints`         | Object       | optional | Determines the browser width in pixels that the grid displays the intended number of tiles.\u003cbr/\u003e\u003cbr/\u003e default: `{sm: 768, md: 992, lg: 1200, xl: 1200}`                                                                            |\n| `slide`                   | number       | optional | It is used to slide the number items on click                                                                                                                                                                                      |\n| `speed`                   | milliseconds | optional | It is used for time taken to slide the number items                                                                                                                                                                                |\n| `interval`                | milliseconds | optional | It is used to make the carousel auto slide with given value. interval defines the interval between slides                                                                                                                          |\n| `load`                    | number       | optional | It is used to load the items similar to pagination. The carousel will trigger the carouselLoad function to load another set of items. It will help you to improve the performance of the app.**`(carouselLoad)=\"myfunc($event)\"`** |\n| `point.visible`           | boolean      | optional | It is used to indicate no. of slides and also shows the current active slide.                                                                                                                                                      |\n| `point.hideOnSingleSlide` | boolean      | optional | It is used to hide the point indicator when slide is less than one.                                                                                                                                                                |\n| `touch`                   | boolean      | optional | It is used to active touch support to the carousel.                                                                                                                                                                                |\n| `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`                                                                                                          |\n| `loop`                    | boolean      | optional | It is used to loop the `ngu-item ngu-tile`. It must be true for `interval`                                                                                                                                                         |\n| `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                                                                                             |\n| `custom`                  | string       | optional | It is you to define the purpose of the carousel. Currently, it only supports `banner`.                                                                                                                                             |\n| `RTL`                     | boolean      | optional | This option enables the `rtl` direction and acts as rtl. By default it is set to `ltr`                                                                                                                                             |\n| `vertical.enabled`        | boolean      | optional | This option enable the `vertical` direction                                                                                                                                                                                        |\n| `vertical.height`         | number       | optional | This option is used to set the height of the carousel                                                                                                                                                                              |\n\n### Custom CSS for Point\n\n```html\n\u003cul class=\"ngucarouselPoint\"\u003e\n  \u003cli *ngFor=\"let i of pointNumbers; let i = index\" [class.active]=\"i==pointers\"\u003e\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nThis is HTML I'm using in the carousel. Add your own CSS according to this elements in `pointStyles`. check below guide for more details.\n\n```html\n\u003cngu-carousel [inputs]=\"carouselBanner\" (onMove)=\"onmoveFn($event)\" (carouselLoad)=\"loadItemsFn()\"\u003e\n\u003c/ngu-carousel\u003e\n```\n\n- `inputs` is an `Input` and It accepts `NguCarouselConfig`.\n- `onMove` is an `Output` which triggered on every slide before start and it will emit `$event` as `NguCarouselStore` object.\n- `carouselLoad` is an `Output` which triggered when slide reaches the end on items based on inputs `load`.\n\n# Getstarted guide\n\n## Banner with Custom point style\n\n```javascript\nimport { Component } from '@angular/core';\nimport { NguCarousel, NguCarouselStore } from '@ngu/carousel';\n\n@Component({\n  selector: 'app-carousel',\n  template: `\n    \u003cngu-carousel [inputs]=\"carouselBanner\" (onMove)=\"onmoveFn($event)\" [trackBy]=\"trackCarousel\"\u003e\n      \u003cngu-item NguCarouselItem class=\"bannerStyle\"\u003e\n        \u003ch1\u003e1\u003c/h1\u003e\n      \u003c/ngu-item\u003e\n\n      \u003cngu-item NguCarouselItem class=\"bannerStyle\"\u003e\n        \u003ch1\u003e2\u003c/h1\u003e\n      \u003c/ngu-item\u003e\n\n      \u003cngu-item NguCarouselItem class=\"bannerStyle\"\u003e\n        \u003ch1\u003e3\u003c/h1\u003e\n      \u003c/ngu-item\u003e\n\n      \u003cbutton NguCarouselPrev class=\"leftRs\"\u003e\u0026lt;\u003c/button\u003e\n      \u003cbutton NguCarouselNext class=\"rightRs\"\u003e\u0026gt;\u003c/button\u003e\n    \u003c/ngu-carousel\u003e\n  `,\n  styles: [\n    `\n      .bannerStyle h1 {\n        background-color: #ccc;\n        min-height: 300px;\n        text-align: center;\n        line-height: 300px;\n      }\n      .leftRs {\n        position: absolute;\n        margin: auto;\n        top: 0;\n        bottom: 0;\n        width: 50px;\n        height: 50px;\n        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);\n        border-radius: 999px;\n        left: 0;\n      }\n\n      .rightRs {\n        position: absolute;\n        margin: auto;\n        top: 0;\n        bottom: 0;\n        width: 50px;\n        height: 50px;\n        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);\n        border-radius: 999px;\n        right: 0;\n      }\n    `\n  ]\n})\nexport class Sample implements OnInit {\n  ngOnInit() {\n    this.carouselBanner = {\n      grid: { xs: 1, sm: 1, md: 1, lg: 1, xl: 1, all: 0 },\n      slide: 1,\n      speed: 400,\n      interval: {\n        timing: 3000,\n        initialDelay: 1000\n      },\n      point: {\n        visible: true\n      },\n      load: 2,\n      loop: true,\n      touch: true\n    };\n  }\n\n  /* It will be triggered on every slide*/\n  onmoveFn(data: NguCarouselStore) {\n    console.log(data);\n  }\n\n  trackCarousel(_, item) {\n    return item;\n  }\n}\n```\n\n## Banner with Vertical carousel\n\n```javascript\nimport { Component } from '@angular/core';\nimport { NguCarousel, NguCarouselConfig } from '@ngu/carousel';\n\n@Component({\n  selector: 'app-carousel',\n  template: `\n    \u003cngu-carousel\n      [inputs]=\"carouselBanner\"\n      (onMove)=\"onmoveFn($event)\"\u003e\n\n          \u003cngu-item NguCarouselItem class=\"bannerStyle\"\u003e\n              \u003ch1\u003e1\u003c/h1\u003e\n          \u003c/ngu-item\u003e\n\n          \u003cngu-item NguCarouselItem class=\"bannerStyle\"\u003e\n              \u003ch1\u003e2\u003c/h1\u003e\n          \u003c/ngu-item\u003e\n\n          \u003cngu-item NguCarouselItem class=\"bannerStyle\"\u003e\n              \u003ch1\u003e3\u003c/h1\u003e\n          \u003c/ngu-item\u003e\n\n          \u003cbutton NguCarouselPrev class='leftRs'\u003e\u0026lt;\u003c/button\u003e\n          \u003cbutton NguCarouselNext class='rightRs'\u003e\u0026gt;\u003c/button\u003e\n    \u003c/ngu-carousel\u003e\n  `,\n  styles: [\n    `\n    .bannerStyle h1 {\n        background-color: #ccc;\n        min-height: 300px;\n        text-align: center;\n        line-height: 300px;\n    }\n    .leftRs {\n        position: absolute;\n        margin: auto;\n        top: 0;\n        bottom: 0;\n        width: 50px;\n        height: 50px;\n        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);\n        border-radius: 999px;\n        left: 0;\n    }\n\n    .rightRs {\n        position: absolute;\n        margin: auto;\n        top: 0;\n        bottom: 0;\n        width: 50px;\n        height: 50px;\n        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);\n        border-radius: 999px;\n        right: 0;\n    }\n\n    .ngucarouselPoint {\n      list-style-type: none;\n      text-align: center;\n      padding: 12px;\n      margin: 0;\n      white-space: nowrap;\n      overflow: auto;\n      position: absolute;\n      width: 100%;\n      bottom: 20px;\n      left: 0;\n      box-sizing: border-box;\n    }\n    .ngucarouselPoint li {\n      display: inline-block;\n      border-radius: 999px;\n      background: rgba(255, 255, 255, 0.55);\n      padding: 5px;\n      margin: 0 3px;\n      transition: .4s ease all;\n    }\n    .ngucarouselPoint li.active {\n        background: white;\n        width: 10px;\n    }\n  `\n  ]\n})\nexport class Sample implements OnInit {\n  ngOnInit() {\n    this.carouselBanner = {\n      grid: { xs: 1, sm: 1, md: 1, lg: 1, xl:1, all: 0 },\n      slide: 1,\n      speed: 400,\n      interval: 4000,\n      point: {\n        visible: true\n      },\n      load: 2,\n      loop: true,\n      touch: true, // touch is not currently in active for vertical carousel, will enable it in future build\n      vertical {\n        enabled: true,\n        height: 400\n      }\n    };\n  }\n\n  /* It will be triggered on every slide*/\n  onmoveFn(data: NguCarousel) {\n    console.log(data);\n  }\n}\n```\n\n## Tile with Carousel Control\n\n```javascript\nimport { Component } from '@angular/core';\nimport { NguCarousel, NguCarouselConfig } from '@ngu/carousel';\n\n@Component({\n  selector: 'app-carousel',\n  template: `\n    \u003cngu-carousel #carousel\n      [inputs]=\"carouselTile\"\n      (carouselLoad)=\"carouselTileLoad($event)\"\u003e\n\n            \u003cngu-tile NguCarouselItem *ngFor=\"let Tile of carouselTileItems\"\u003e\n                \u003ch1\u003e{{Tile + 1}}\u003c/h1\u003e\n            \u003c/ngu-tile\u003e\n\n          \u003cbutton NguCarouselPrev class='leftRs'\u003e\u0026lt;\u003c/button\u003e\n          \u003cbutton NguCarouselNext class='rightRs'\u003e\u0026gt;\u003c/button\u003e\n    \u003c/ngu-carousel\u003e\n    \u003cbutton (click)=\"resetFn()\"\u003eReset\u003c/button\u003e\n  `,\n  styles: [`\n\n    h1{\n      min-height: 200px;\n      background-color: #ccc;\n      text-align: center;\n      line-height: 200px;\n    }\n    .leftRs {\n        position: absolute;\n        margin: auto;\n        top: 0;\n        bottom: 0;\n        width: 50px;\n        height: 50px;\n        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);\n        border-radius: 999px;\n        left: 0;\n    }\n\n    .rightRs {\n        position: absolute;\n        margin: auto;\n        top: 0;\n        bottom: 0;\n        width: 50px;\n        height: 50px;\n        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);\n        border-radius: 999px;\n        right: 0;\n    }\n  `]\n})\nexport class Sample implements OnInit {\n  private carouselToken: string;\n\n  public carouselTileItems: Array\u003cany\u003e;\n  public carouselTile: NguCarouselConfig;\n  @ViewChild('carousel') carousel: NguCarousel;\n\n  constructor() {  }\n\n  ngOnInit(){\n    this.carouselTileItems = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n\n    this.carouselTile = {\n      grid: {xs: 2, sm: 3, md: 3, lg: 5, xl:5, all: 0},\n      slide: 2,\n      speed: 400,\n      animation: 'lazy',\n      point: {\n        visible: true\n      },\n      load: 2,\n      touch: true,\n      easing: 'ease'\n    }\n  }\n\n  initDataFn(key: NguCarouselStore) {\n    this.carouselToken = key.token;\n  }\n\n  resetFn() {\n    this.carousel.reset(this.carouselToken);\n  }\n\n  moveToSlide() {\n    this.carousel.moveToSlide(this.carouselToken, 2, false);\n  }\n\n  public carouselTileLoad(evt: any) {\n\n    const len = this.carouselTileItems.length\n    if (len \u003c= 30) {\n      for (let i = len; i \u003c len + 10; i++) {\n        this.carouselTileItems.push(i);\n      }\n    }\n\n  }\n\n     // carouselLoad will trigger this function when your load value reaches\n     // it helps to load the data by parts to increase the performance of the app\n     // must use feature to all carousel\n\n}\n```\n\n## Tile with custom point style\n\n```javascript\nimport { Component } from '@angular/core';\nimport { NguCarousel } from '@ngu/carousel';\n\n@Component({\n  selector: 'app-carousel',\n  template: `\n    \u003cngu-carousel\n      [inputs]=\"carouselTile\"\n      (carouselLoad)=\"carouselTileLoad($event)\"\u003e\n\n            \u003cngu-tile NguCarouselItem *ngFor=\"let Tile of carouselTileItems\"\u003e\n                \u003ch1\u003e{{Tile + 1}}\u003c/h1\u003e\n            \u003c/ngu-tile\u003e\n\n          \u003cbutton NguCarouselPrev class='leftRs'\u003e\u0026lt;\u003c/button\u003e\n          \u003cbutton NguCarouselNext class='rightRs'\u003e\u0026gt;\u003c/button\u003e\n    \u003c/ngu-carousel\u003e\n  `,\n  styles: [`\n\n    h1{\n      min-height: 200px;\n      background-color: #ccc;\n      text-align: center;\n      line-height: 200px;\n    }\n    .leftRs {\n        position: absolute;\n        margin: auto;\n        top: 0;\n        bottom: 0;\n        width: 50px;\n        height: 50px;\n        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);\n        border-radius: 999px;\n        left: 0;\n    }\n\n    .rightRs {\n        position: absolute;\n        margin: auto;\n        top: 0;\n        bottom: 0;\n        width: 50px;\n        height: 50px;\n        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);\n        border-radius: 999px;\n        right: 0;\n    }\n  `]\n})\nexport class Sample implements OnInit {\n\n  public carouselTileItems: Array\u003cany\u003e;\n  public carouselTile: NguCarousel;\n\n  ngOnInit(){\n    this.carouselTileItems = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];\n\n    this.carouselTile = {\n      grid: {xs: 2, sm: 3, md: 3, lg: 5, xl:5, all: 0},\n      slide: 2,\n      speed: 400,\n      animation: 'lazy',\n      point: {\n        visible: true,\n        pointStyles: `\n          .ngucarouselPoint {\n            list-style-type: none;\n            text-align: center;\n            padding: 12px;\n            margin: 0;\n            white-space: nowrap;\n            overflow: auto;\n            box-sizing: border-box;\n          }\n          .ngucarouselPoint li {\n            display: inline-block;\n            border-radius: 50%;\n            border: 2px solid rgba(0, 0, 0, 0.55);\n            padding: 4px;\n            margin: 0 3px;\n            transition-timing-function: cubic-bezier(.17, .67, .83, .67);\n            transition: .4s;\n          }\n          .ngucarouselPoint li.active {\n              background: #6b6b6b;\n              transform: scale(1.2);\n          }\n        `\n      },\n      load: 2,\n      touch: true,\n      easing: 'ease'\n    }\n  }\n\n  public carouselTileLoad(evt: any) {\n\n    const len = this.carouselTileItems.length\n    if (len \u003c= 30) {\n      for (let i = len; i \u003c len + 10; i++) {\n        this.carouselTileItems.push(i);\n      }\n    }\n\n  }\n\n     // carouselLoad will trigger this function when your load value reaches\n     // it helps to load the data by parts to increase the performance of the app\n     // must use feature to all carousel\n\n}\n```\n\n## License\n\n[MIT](LICENSE) license.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/codeveins\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/47743769?v=4?s=100\" width=\"100px;\" alt=\"Code Veins\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eCode Veins\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=codeveins\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/mczachurski\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/6191974?v=4?s=100\" width=\"100px;\" alt=\"Marcin Czachurski\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMarcin Czachurski\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=mczachurski\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.linkedin.com/in/alexander-buiko-16715282/\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/4117678?v=4?s=100\" width=\"100px;\" alt=\"Alexander Buiko\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlexander Buiko\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=reed665\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://fkse.io\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/1880828?v=4?s=100\" width=\"100px;\" alt=\"Frido Koch\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFrido Koch\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=fridolin-koch\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/gimox\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/2871248?v=4?s=100\" width=\"100px;\" alt=\"Giorgio Modoni\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGiorgio Modoni\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=gimox\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/faran312\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/27755518?v=4?s=100\" width=\"100px;\" alt=\"faran312\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003efaran312\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=faran312\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.stockopedia.com/\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/412672?v=4?s=100\" width=\"100px;\" alt=\"Euan Goddard\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEuan Goddard\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=euangoddard\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.santoshyadav.dev\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/11923975?v=4?s=100\" width=\"100px;\" alt=\"Santosh Yadav\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSantosh Yadav\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=santoshyadav198613\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://tiagomagalha.es\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/5302040?v=4?s=100\" width=\"100px;\" alt=\"Tiago Magalhães\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTiago Magalhães\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=tiagomsmagalhaes\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://samvloeberghs.be\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/231618?v=4?s=100\" width=\"100px;\" alt=\"Sam Vloeberghs\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSam Vloeberghs\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=samvloeberghs\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/rat-matheson\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/61026434?v=4?s=100\" width=\"100px;\" alt=\"rat-matheson\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003erat-matheson\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=rat-matheson\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/Yberion\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4186385?v=4?s=100\" width=\"100px;\" alt=\"Brandon Largeau\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBrandon Largeau\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=Yberion\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://ng-guru.io\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/7337691?v=4?s=100\" width=\"100px;\" alt=\"Artur Androsovych\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eArtur Androsovych\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=arturovt\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/chivesrs\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/7110657?v=4?s=100\" width=\"100px;\" alt=\"chivesrs\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003echivesrs\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=chivesrs\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/luca-peruzzo\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/69015314?v=4?s=100\" width=\"100px;\" alt=\"Luca Peruzzo\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLuca Peruzzo\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=luca-peruzzo\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://houseofangular.io/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/67691339?v=4?s=100\" width=\"100px;\" alt=\"Mateusz Stefańczyk\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMateusz Stefańczyk\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=va-stefanek\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://riegler.fr\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1300985?v=4?s=100\" width=\"100px;\" alt=\"Matthieu Riegler\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMatthieu Riegler\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/pulls?q=is%3Apr+reviewed-by%3AJeanMeche\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/sasidharansd\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/47988127?v=4?s=100\" width=\"100px;\" alt=\"Sasidharan SD\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSasidharan SD\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=sasidharansd\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/jonplata\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/14810139?v=4?s=100\" width=\"100px;\" alt=\"Jonatan Plata\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJonatan Plata\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/uiuniversal/ngu-carousel/commits?author=jonplata\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","funding_links":[],"categories":["UI Components","Third Party Components"],"sub_categories":["Carousel","Carousels"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuiuniversal%2Fngu-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuiuniversal%2Fngu-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuiuniversal%2Fngu-carousel/lists"}