{"id":24054043,"url":"https://github.com/donaldxdonald/embla-carousel-angular","last_synced_at":"2026-01-23T17:25:48.439Z","repository":{"id":221868819,"uuid":"755453655","full_name":"donaldxdonald/embla-carousel-angular","owner":"donaldxdonald","description":"Angular wrapper for Embla Carousel, a lightweight carousel library with fluid motion and great swipe precision.","archived":false,"fork":false,"pushed_at":"2025-11-28T16:45:02.000Z","size":1796,"stargazers_count":33,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-30T21:58:51.507Z","etag":null,"topics":["angular","carousel","embla-carousel","slider","swiper"],"latest_commit_sha":null,"homepage":"https://www.embla-carousel.com/","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/donaldxdonald.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-02-10T08:53:49.000Z","updated_at":"2025-11-28T16:44:42.000Z","dependencies_parsed_at":"2024-02-10T18:26:29.759Z","dependency_job_id":"7473eb44-65a5-476c-b97a-8b66b247f11e","html_url":"https://github.com/donaldxdonald/embla-carousel-angular","commit_stats":null,"previous_names":["donaldxdonald/embla-carousel-angular"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/donaldxdonald/embla-carousel-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donaldxdonald%2Fembla-carousel-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donaldxdonald%2Fembla-carousel-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donaldxdonald%2Fembla-carousel-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donaldxdonald%2Fembla-carousel-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/donaldxdonald","download_url":"https://codeload.github.com/donaldxdonald/embla-carousel-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donaldxdonald%2Fembla-carousel-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28696534,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T15:57:05.722Z","status":"ssl_error","status_checked_at":"2026-01-23T15:56:27.656Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","carousel","embla-carousel","slider","swiper"],"created_at":"2025-01-09T03:01:24.018Z","updated_at":"2026-01-23T17:25:48.431Z","avatar_url":"https://github.com/donaldxdonald.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Carousels"],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.embla-carousel.com/\"\u003e\u003cimg width=\"100\" height=\"100\" src=\"https://www.embla-carousel.com/embla-logo.svg\" alt=\"Embla Carousel\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://angular.dev/\"\u003e\u003cimg width=\"100\" height=\"100\" src=\"/src/assets/images/logos/angular_renaissance.png\" alt=\"Angular\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/embla-carousel-angular\" target=\"__blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/embla-carousel-angular\" alt=\"NPM version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/package/embla-carousel-angular\" target=\"__blank\"\u003e\u003cimg src=\"https://badgen.net/bundlephobia/minzip/embla-carousel-angular\" alt=\"Bundlephobia minzip\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/embla-carousel-angular\" target=\"__blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/embla-carousel-angular\" alt=\"NPM downloads\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003eEmbla Carousel Angular\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\n  An Angular wrapper for \u003cstrong\u003eEmbla Carousel\u003c/strong\u003e.\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003ch2 align=\"center\"\u003eInstallation\u003c/h2\u003e\n\n```shell\nnpm i embla-carousel-angular\n```\n\n\u003cbr\u003e\n\n\n\u003ch2 align=\"center\"\u003eThe component structure\u003c/h2\u003e\n\nEmbla Carousel provides the handy `EmblaCarouselDirective` **standalone** directive for seamless integration with Angular. A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following structure to your carousel:\n\n```ts\nimport { Component, effect, viewChild } from '@angular/core'\nimport {\n  EmblaCarouselDirective,\n  EmblaCarouselType\n} from 'embla-carousel-angular'\n\n@Component({\n  selector: 'app-carousel',\n  template: `\n    \u003cdiv class=\"embla\" emblaCarousel [options]=\"options\"\u003e\n      \u003cdiv class=\"embla__container\"\u003e\n        \u003cdiv class=\"embla__slide\"\u003eSlide 1\u003c/div\u003e\n        \u003cdiv class=\"embla__slide\"\u003eSlide 2\u003c/div\u003e\n        \u003cdiv class=\"embla__slide\"\u003eSlide 3\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  `,\n  imports: [EmblaCarouselDirective],\n  standalone: true\n})\nexport class CarouselComponent implements AfterViewInit {\n  private emblaRef = viewChild\u003cEmblaCarouselDirective\u003e(EmblaCarouselDirective);\n\n  private emblaApi?: EmblaCarouselType\n  private options = { loop: false }\n\n  constructor() {\n    effect(() =\u003e {\n      this.emblaApi = this.emblaRef()?.emblaApi;\n    });\n  }\n}\n```\n\n\u003ch2 align=\"center\"\u003eStyling the carousel\u003c/h2\u003e\n\nThe element with the classname `embla` is needed to cover the scroll overflow. Its child element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements:\n\n```css\n.embla {\n  overflow: hidden;\n}\n.embla__container {\n  display: flex;\n}\n.embla__slide {\n  flex: 0 0 100%;\n  min-width: 0;\n}\n```\n\n\u003ch2 align=\"center\"\u003eAccessing the carousel API\u003c/h2\u003e\n\nThe `emblaCarousel` directive takes the Embla Carousel [options](https://www.embla-carousel.com/api/options/) as part of its inputs. Additionally, you can access the [API](https://www.embla-carousel.com/api/) by using the `viewChild` signal to access the carousel in the effect.\n\n\u003e [!WARNING]\n\u003e  Calling the following embla APIs directly will trigger too much ChangeDetection, which will lead to serious performance issues.\n\n\u003cbr /\u003e\n\n- `emblaApi.on()`\n- `emblaApi.scrollNext()`\n- `emblaApi.scrollPrev()`\n- `emblaApi.scrollTo()`\n\nConsider using the following methods which are wrapped with `ngZone.runOutsideAngular()`:\n\n- `EmblaCarouselDirective.scrollPrev()`\n- `EmblaCarouselDirective.scrollNext()`\n- `EmblaCarouselDirective.scrollTo()`\n\n```ts\nimport { Component, effect, viewChild } from '@angular/core'\nimport {\n  EmblaCarouselDirective,\n  EmblaCarouselType\n} from 'embla-carousel-angular'\n\n@Component({\n  selector: 'app-carousel',\n  template: `\n    \u003cdiv class=\"embla\" emblaCarousel [options]=\"options\"\u003e\n      \u003cdiv class=\"embla__container\"\u003e\n        \u003cdiv class=\"embla__slide\"\u003eSlide 1\u003c/div\u003e\n        \u003cdiv class=\"embla__slide\"\u003eSlide 2\u003c/div\u003e\n        \u003cdiv class=\"embla__slide\"\u003eSlide 3\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  `,\n  imports: [EmblaCarouselDirective],\n  standalone: true\n})\nexport class CarouselComponent {\n  private emblaRef = viewChild\u003cEmblaCarouselDirective\u003e(EmblaCarouselDirective);\n\n  private emblaApi?: EmblaCarouselType\n  private options = { loop: false }\n\n  constructor() {\n    effect(() =\u003e {\n      this.emblaApi = this.emblaRef()?.emblaApi;\n    });\n  }\n}\n```\n\n\u003ch2 align=\"center\"\u003eListening the carousel events\u003c/h2\u003e\n\nThe `emblaCarousel` directive also provides a custom event: `emblaChange` that forwards embla events, also wrapped in `ngZone.runOutsideAngular`. You need to listen by passing the specified event names into `subscribeToEvents` input on demand.\n\n```ts\nimport { Component, effect, viewChild } from '@angular/core'\nimport {\n  EmblaCarouselDirective,\n  EmblaCarouselType,\n  EmblaEventType\n} from 'embla-carousel-angular'\n\n@Component({\n  selector: 'app-carousel',\n  template: `\n    \u003cdiv\n      class=\"embla\"\n      emblaCarousel\n      [options]=\"options\"\n      [subscribeToEvents]=\"subscribeToEvents\"\n      (emblaChange)=\"onEmblaChange($event)\"\n    \u003e\n      \u003cdiv class=\"embla__container\"\u003e\n        \u003cdiv class=\"embla__slide\"\u003eSlide 1\u003c/div\u003e\n        \u003cdiv class=\"embla__slide\"\u003eSlide 2\u003c/div\u003e\n        \u003cdiv class=\"embla__slide\"\u003eSlide 3\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  `,\n  imports: [EmblaCarouselDirective],\n  standalone: true\n})\nexport class CarouselComponent {\n  private emblaRef = viewChild\u003cEmblaCarouselDirective\u003e(EmblaCarouselDirective);\n\n  private emblaApi?: EmblaCarouselType\n  private options = { loop: false }\n\n  constructor() {\n    effect(() =\u003e {\n      this.emblaApi = this.emblaRef()?.emblaApi;\n    });\n  }\n\n  public readonly subscribeToEvents: EmblaEventType[] = [\n    'init',\n    'pointerDown',\n    'pointerUp',\n    'slidesChanged',\n    'slidesInView',\n    'select',\n    'settle',\n    'destroy',\n    'reInit',\n    'resize',\n    'scroll'\n  ]\n\n  onEmblaChanged(event: EmblaEventType): void {\n    console.log(`Embla event triggered: ${event}`)\n  }\n}\n```\n\n\u003ch2 align=\"center\"\u003eAdding plugins\u003c/h2\u003e\n\nStart by installing the plugin you want to use. In this example, we're going to install the [Autoplay](https://www.embla-carousel.com/plugins/autoplay/) plugin:\n\n```shell\nnpm install embla-carousel-autoplay --save\n```\n\nThe `emblaCarousel` directive inputs also accepts [plugins](https://www.embla-carousel.com/plugins/). Note that plugins need to be passed in an array like so:\n\n```ts\nimport { Component, effect, viewChild } from '@angular/core'\nimport {\n  EmblaCarouselDirective,\n  EmblaCarouselType\n} from 'embla-carousel-angular'\nimport Autoplay from 'embla-carousel-autoplay'\n\n@Component({\n  selector: 'app-carousel',\n  template: `\n    \u003cdiv class=\"embla\" emblaCarousel [options]=\"options\" [plugins]=\"plugins\"\u003e\n      \u003cdiv class=\"embla__container\"\u003e\n        \u003cdiv class=\"embla__slide\"\u003eSlide 1\u003c/div\u003e\n        \u003cdiv class=\"embla__slide\"\u003eSlide 2\u003c/div\u003e\n        \u003cdiv class=\"embla__slide\"\u003eSlide 3\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  `,\n  imports: [EmblaCarouselDirective],\n  standalone: true\n})\nexport class CarouselComponent {\n  private emblaRef = viewChild\u003cEmblaCarouselDirective\u003e(EmblaCarouselDirective);\n\n  private emblaApi?: EmblaCarouselType\n  public options = { loop: false }\n  public plugins = [Autoplay()]\n\n  constructor() {\n    effect(() =\u003e {\n      this.emblaApi = this.emblaRef()?.emblaApi;\n    });\n  }\n}\n```\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003e\n    \u003ch2 align=\"center\"\u003eThanks\u003c/h2\u003e\n  \u003c/strong\u003e\n  \u003cp align=\"center\"\u003e\n     Thanks to \u003ca href=\"https://github.com/davidjerleke\"\u003edavidjerleke\u003c/a\u003e, \u003ca href=\"https://github.com/zip-fa\"\u003ezip-fa\u003c/a\u003e and \u003ca href=\"https://github.com/JeanMeche\"\u003eJeanMeche\u003c/a\u003e for the review and advice.\n  \u003c/p\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonaldxdonald%2Fembla-carousel-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonaldxdonald%2Fembla-carousel-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonaldxdonald%2Fembla-carousel-angular/lists"}