ngx-drag-scroll - GitLite

KO | EN

gitlite — search

#javascript #llm #go #rust #deep-learning #macos #nodejs #java #awesome #cli #kubernetes #vue #mcp #openai

ngx-drag-scroll

(★ 345)

A lightweight responsive Angular carousel library

파일 탐색기

최종 버전 다운로드 (.zip)

- - ci.yml
- FUNDING.yml
- ISSUE_TEMPLATE.md
- PULL_REQUEST_TEMPLATE
- commit-msg
- pre-commit
- - karma.conf.js
  - ng-package.json
  - package.json
  - tsconfig.lib.json
  - tsconfig.lib.prod.json
  - tsconfig.spec.json
- - app-routing.module.ts
  - app.component.html
  - app.component.scss
  - app.component.spec.ts
  - app.component.ts
- - .gitkeep
- - environment.prod.ts
  - environment.ts
- favicon.ico
- index.html
- karma.conf.js
- main.ts
- polyfills.ts
- styles.scss
- test.ts
- tsconfig.app.json
- tsconfig.spec.json
.editorconfig
.eslintignore
.eslintrc.json
.gitignore
.nvmrc
.prettierrc.json
angular.json
browserslist
CHANGELOG.md
commitlint.config.js
CONTRIBUTING.md
copy-artifacts.js
LICENSE
lint-staged.config.mjs
package-lock.json
package.json
README.md
RELEASE.md
tsconfig.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/bfwg/ngx-drag-scroll

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd ngx-drag-scroll

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install ngx-drag-scroll --save

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# [Angular Draggable Carousel](https://bfwg.github.io/ngx-drag-scroll/)

Lightweight drag to scroll carousel for Angular

## Maintainers wanted

[![npm version](https://img.shields.io/npm/v/ngx-drag-scroll.svg)](https://www.npmjs.com/package/ngx-drag-scroll)
[![Monthly Download](https://img.shields.io/npm/dm/ngx-drag-scroll.svg?style=flat-square)](https://www.npmjs.com/package/ngx-drag-scroll)
[![Build Status](https://travis-ci.org/bfwg/ngx-drag-scroll.svg?branch=master)](https://travis-ci.org/bfwg/ngx-drag-scroll)
[![License MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/bfwg/ngx-drag-scroll/blob/master/LICENSE)

_Scroll on drag!_

![Scroll](https://user-images.githubusercontent.com/12819525/31459582-73565738-ae78-11e7-8b45-83f686123b63.gif)

Try out the [demo](https://bfwg.github.io/ngx-drag-scroll/)!

# Install

You can get it on npm.

```shell
npm install ngx-drag-scroll --save
```

## Requirements

This project needs `Angular 5+` as dependencies though.

# Setup

Our component and directive are standalone now!
You'll need to import `DragScrollComponent` and/or `DragScrollItemDirective` to your application module or component.

## Module:

```typescript
import { DragScrollComponent, DragScrollItemDirective } from 'ngx-drag-scroll';

...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    DragScrollComponent,
    DragScrollItemDirective,
    ...
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})

export class AppModule {
}

```

## Component:

```typescript
import { DragScrollComponent, DragScrollItemDirective } from 'ngx-drag-scroll';

@Component({
  selector: 'sample',
  template:`
  <drag-scroll>
    <img drag-scroll-item src="some-url" />
    <img drag-scroll-item src="some-url" />
    <img drag-scroll-item src="some-url" />
  </drag-scroll>
  `,
  standalone: true,
  imports: [
    DragScrollComponent,
    DragScrollItemDirective,
    ...
  ]
})
class Sample {}
```

Add the `drag-scroll` attribute to a scrollable element:

```typescript
@Component({
  selector: 'sample',
  template: ` <drag-scroll style="width: 100px; height: 10px"> Big text goes here... </drag-scroll> `,
  styles: [
    `
    drag-scroll {
      height: 50px
      width: 100px
    }
    `
  ]
})
class SampleBigText {}
```

That's it! Now you can scroll it by dragging.

If you want to group items into a carousel, you will need to add `drag-scroll-item` to the carsousel items.

```typescript
@Component({
  selector: 'sample',
  template: `
    <drag-scroll>
      <img drag-scroll-item src="some-url" />
      <img drag-scroll-item src="some-url" />
      <img drag-scroll-item src="some-url" />
    </drag-scroll>
  `,
  styles: [
    `
    drag-scroll {
      height: 50px
      width: 100px
    }
    img {
      height: 50px
      width: 50px
    }
    `
  ]
})
class SampleCarousel {}
```

## API REFERENCE

### DragScrollComponent

| Name                   | Type    | Description                                                          | Default |
| ---------------------- | ------- | -------------------------------------------------------------------- | ------- |
| scrollbar-hidden       | @Input  | Whether the scroll bar for this element is hidden.                   | false   |
| drag-scroll-disabled   | @Input  | Whether all draging and scrolling events is disabled.                | false   |
| drag-scroll-x-disabled | @Input  | Whether horizontally dragging and scrolling events is disabled.      | false   |
| scroll-x-wheel-enabled | @Input  | Whether scrolling horizontally with mouse wheel is enabled           | false   |
| drag-scroll-y-disabled | @Input  | Whether vertically dragging and scrolling events is disabled.        | false   |
| drag-disabled          | @Input  | Whether draging is disabled.                                         | false   |
| snap-disabled          | @Input  | Whether snapping is disabled.                                        | false   |
| snap-offset            | @Input  | Pixels of previous element to show on snap or moving left and right. | 0       |
| snap-duration          | @Input  | Duration of snap animation in milliseconds.                          | 500     |
| reachesLeftBound       | @Output | Whether reaching the left carousel bound.                            | n/a     |
| reachesRightBound      | @Output | Whether reaching the right carousel bound.                           | n/a     |
| dragStart              | @Output | Executes when drag start.                                            | n/a     |
| dragEnd                | @Output | Executes when drag end.                                              | n/a     |
| snapAnimationFinished  | @Output | The snap animation for the new selection has finished.               | n/a     |
| indexChanged           | @Output | Executes when the current index of the carousel changes.             | n/a     |
| dsInitialized          | @Output | Executes when the drag scroll component has been initialized.        | n/a     |

---

### DragScrollItemDirective

| Name          | Type   | Description                              | Default |
| ------------- | ------ | ---------------------------------------- | ------- |
| drag-disabled | @Input | Whether draging on the item is disabled. | false   |

---

## Add navigation button

```typescript
@Component({
  selector: 'sample',
  template: `
    <drag-scroll #nav>
      <img drag-scroll-item src="some-url" />
      <img drag-scroll-item src="some-url" />
      <img drag-scroll-item src="some-url" />
    </drag-scroll>
    <button (click)="moveLeft()">Left</button>
    <button (click)="moveRight()">Right</button>
    <button (click)="moveTo(2)">Last</button>
  `
})
class Sample {
  @ViewChild('nav', { read: DragScrollComponent }) ds: DragScrollComponent;

moveLeft() {
    this.ds.moveLeft();
  }

moveRight() {
    this.ds.moveRight();
  }

moveTo(index) {
    this.ds.moveTo(index);
  }

ngAfterViewInit() {
    // Starting ngx-drag-scroll from specified index(3)
    setTimeout(() => {
      this.ds.moveTo(3);
    }, 0);
  }
}
```

### Contributing

Clone 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.

I'll accept pretty much everything so feel free to open a Pull-Request.

We use commitlint for managing our commits. Check out [Contributing](CONTRIBUTING.md) for more details.

# License

[MIT](/LICENSE)