{"id":13729404,"url":"https://github.com/bfwg/ngx-drag-scroll","last_synced_at":"2025-05-16T00:04:42.350Z","repository":{"id":17068786,"uuid":"80800510","full_name":"bfwg/ngx-drag-scroll","owner":"bfwg","description":"A lightweight responsive Angular carousel library","archived":false,"fork":false,"pushed_at":"2024-07-01T16:29:49.000Z","size":14032,"stargazers_count":347,"open_issues_count":39,"forks_count":100,"subscribers_count":7,"default_branch":"develop","last_synced_at":"2025-05-08T16:06:42.690Z","etag":null,"topics":["angular","angular7","carousel","drag","javascript","typescript"],"latest_commit_sha":null,"homepage":"https://ngx-drag-scroll.fanjin.io","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/bfwg.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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}},"created_at":"2017-02-03T05:36:40.000Z","updated_at":"2025-03-14T14:20:28.000Z","dependencies_parsed_at":"2024-01-02T07:59:48.308Z","dependency_job_id":null,"html_url":"https://github.com/bfwg/ngx-drag-scroll","commit_stats":{"total_commits":265,"total_committers":32,"mean_commits":8.28125,"dds":0.2905660377358491,"last_synced_commit":"77100d6e0d74a49b353788b43927dc2b2ff219aa"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bfwg%2Fngx-drag-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bfwg%2Fngx-drag-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bfwg%2Fngx-drag-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bfwg%2Fngx-drag-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bfwg","download_url":"https://codeload.github.com/bfwg/ngx-drag-scroll/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254442854,"owners_count":22071878,"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","angular7","carousel","drag","javascript","typescript"],"created_at":"2024-08-03T02:00:59.753Z","updated_at":"2025-05-16T00:04:42.316Z","avatar_url":"https://github.com/bfwg.png","language":"TypeScript","funding_links":[],"categories":["UI Components","Third Party Components"],"sub_categories":["Carousel","Carousels"],"readme":"# [Angular Draggable Carousel](https://bfwg.github.io/ngx-drag-scroll/)\n\nLightweight drag to scroll carousel for Angular\n\n## Maintainers wanted\n\n[![npm version](https://img.shields.io/npm/v/ngx-drag-scroll.svg)](https://www.npmjs.com/package/ngx-drag-scroll)\n[![Monthly Download](https://img.shields.io/npm/dm/ngx-drag-scroll.svg?style=flat-square)](https://www.npmjs.com/package/ngx-drag-scroll)\n[![Build Status](https://travis-ci.org/bfwg/ngx-drag-scroll.svg?branch=master)](https://travis-ci.org/bfwg/ngx-drag-scroll)\n[![License MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/bfwg/ngx-drag-scroll/blob/master/LICENSE)\n\n_Scroll on drag!_\n\n![Scroll](https://user-images.githubusercontent.com/12819525/31459582-73565738-ae78-11e7-8b45-83f686123b63.gif)\n\nTry out the [demo](https://bfwg.github.io/ngx-drag-scroll/)!\n\n# Install\n\nYou can get it on npm.\n\n```shell\nnpm install ngx-drag-scroll --save\n```\n\n## Requirements\n\nThis project needs `Angular 5+` as dependencies though.\n\n# Setup\n\nOur component and directive are standalone now!\nYou'll need to import `DragScrollComponent` and/or `DragScrollItemDirective` to your application module or component.\n\n## Module:\n\n```typescript\nimport { DragScrollComponent, DragScrollItemDirective } from 'ngx-drag-scroll';\n\n...\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    DragScrollComponent,\n    DragScrollItemDirective,\n    ...\n  ],\n  providers: [],\n  bootstrap: [ AppComponent ]\n})\n\nexport class AppModule {\n}\n\n```\n\n## Component:\n\n```typescript\nimport { DragScrollComponent, DragScrollItemDirective } from 'ngx-drag-scroll';\n\n@Component({\n  selector: 'sample',\n  template:`\n  \u003cdrag-scroll\u003e\n    \u003cimg drag-scroll-item src=\"some-url\" /\u003e\n    \u003cimg drag-scroll-item src=\"some-url\" /\u003e\n    \u003cimg drag-scroll-item src=\"some-url\" /\u003e\n  \u003c/drag-scroll\u003e\n  `,\n  standalone: true,\n  imports: [\n    DragScrollComponent,\n    DragScrollItemDirective,\n    ...\n  ]\n})\nclass Sample {}\n```\n\nAdd the `drag-scroll` attribute to a scrollable element:\n\n```typescript\n@Component({\n  selector: 'sample',\n  template: ` \u003cdrag-scroll style=\"width: 100px; height: 10px\"\u003e Big text goes here... \u003c/drag-scroll\u003e `,\n  styles: [\n    `\n    drag-scroll {\n      height: 50px\n      width: 100px\n    }\n    `\n  ]\n})\nclass SampleBigText {}\n```\n\nThat's it! Now you can scroll it by dragging.\n\nIf you want to group items into a carousel, you will need to add `drag-scroll-item` to the carsousel items.\n\n```typescript\n@Component({\n  selector: 'sample',\n  template: `\n    \u003cdrag-scroll\u003e\n      \u003cimg drag-scroll-item src=\"some-url\" /\u003e\n      \u003cimg drag-scroll-item src=\"some-url\" /\u003e\n      \u003cimg drag-scroll-item src=\"some-url\" /\u003e\n    \u003c/drag-scroll\u003e\n  `,\n  styles: [\n    `\n    drag-scroll {\n      height: 50px\n      width: 100px\n    }\n    img {\n      height: 50px\n      width: 50px\n    }\n    `\n  ]\n})\nclass SampleCarousel {}\n```\n\n## API REFERENCE\n\n### DragScrollComponent\n\n| Name                   | Type    | Description                                                          | Default |\n| ---------------------- | ------- | -------------------------------------------------------------------- | ------- |\n| scrollbar-hidden       | @Input  | Whether the scroll bar for this element is hidden.                   | false   |\n| drag-scroll-disabled   | @Input  | Whether all draging and scrolling events is disabled.                | false   |\n| drag-scroll-x-disabled | @Input  | Whether horizontally dragging and scrolling events is disabled.      | false   |\n| scroll-x-wheel-enabled | @Input  | Whether scrolling horizontally with mouse wheel is enabled           | false   |\n| drag-scroll-y-disabled | @Input  | Whether vertically dragging and scrolling events is disabled.        | false   |\n| drag-disabled          | @Input  | Whether draging is disabled.                                         | false   |\n| snap-disabled          | @Input  | Whether snapping is disabled.                                        | false   |\n| snap-offset            | @Input  | Pixels of previous element to show on snap or moving left and right. | 0       |\n| snap-duration          | @Input  | Duration of snap animation in milliseconds.                          | 500     |\n| reachesLeftBound       | @Output | Whether reaching the left carousel bound.                            | n/a     |\n| reachesRightBound      | @Output | Whether reaching the right carousel bound.                           | n/a     |\n| dragStart              | @Output | Executes when drag start.                                            | n/a     |\n| dragEnd                | @Output | Executes when drag end.                                              | n/a     |\n| snapAnimationFinished  | @Output | The snap animation for the new selection has finished.               | n/a     |\n| indexChanged           | @Output | Executes when the current index of the carousel changes.             | n/a     |\n| dsInitialized          | @Output | Executes when the drag scroll component has been initialized.        | n/a     |\n\n---\n\n### DragScrollItemDirective\n\n| Name          | Type   | Description                              | Default |\n| ------------- | ------ | ---------------------------------------- | ------- |\n| drag-disabled | @Input | Whether draging on the item is disabled. | false   |\n\n---\n\n## Add navigation button\n\n```typescript\n@Component({\n  selector: 'sample',\n  template: `\n    \u003cdrag-scroll #nav\u003e\n      \u003cimg drag-scroll-item src=\"some-url\" /\u003e\n      \u003cimg drag-scroll-item src=\"some-url\" /\u003e\n      \u003cimg drag-scroll-item src=\"some-url\" /\u003e\n    \u003c/drag-scroll\u003e\n    \u003cbutton (click)=\"moveLeft()\"\u003eLeft\u003c/button\u003e\n    \u003cbutton (click)=\"moveRight()\"\u003eRight\u003c/button\u003e\n    \u003cbutton (click)=\"moveTo(2)\"\u003eLast\u003c/button\u003e\n  `\n})\nclass Sample {\n  @ViewChild('nav', { read: DragScrollComponent }) ds: DragScrollComponent;\n\n  moveLeft() {\n    this.ds.moveLeft();\n  }\n\n  moveRight() {\n    this.ds.moveRight();\n  }\n\n  moveTo(index) {\n    this.ds.moveTo(index);\n  }\n\n  ngAfterViewInit() {\n    // Starting ngx-drag-scroll from specified index(3)\n    setTimeout(() =\u003e {\n      this.ds.moveTo(3);\n    }, 0);\n  }\n}\n```\n\n### Contributing\n\nClone the repository, and run `npm install`, `npm run build ngx-drag-scroll`, `npm start`. The demo app will starts on port :4200. I usually do my development on the demo app.\n\nI'll accept pretty much everything so feel free to open a Pull-Request.\n\nWe use commitlint for managing our commits. Check out [Contributing](CONTRIBUTING.md) for more details.\n\n# License\n\n[MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbfwg%2Fngx-drag-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbfwg%2Fngx-drag-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbfwg%2Fngx-drag-scroll/lists"}