Angular Draggable Carousel

Lightweight drag to scroll carousel for Angular

Maintainers wanted

Scroll on drag!

Try out the demo!

Install

You can get it on npm.

1npm 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:

1import { DragScrollComponent, DragScrollItemDirective } from 'ngx-drag-scroll';
2
3...
4
5@NgModule({
6  declarations: [
7    AppComponent
8  ],
9  imports: [
10    DragScrollComponent,
11    DragScrollItemDirective,
12    ...
13  ],
14  providers: [],
15  bootstrap: [ AppComponent ]
16})
17
18export class AppModule {
19}
20

Component:

1import { DragScrollComponent, DragScrollItemDirective } from 'ngx-drag-scroll';
2
3@Component({
4  selector: 'sample',
5  template:`
6  <drag-scroll>
7    <img drag-scroll-item src="some-url" />
8    <img drag-scroll-item src="some-url" />
9    <img drag-scroll-item src="some-url" />
10  </drag-scroll>
11  `,
12  standalone: true,
13  imports: [
14    DragScrollComponent,
15    DragScrollItemDirective,
16    ...
17  ]
18})
19class Sample {}

Add the drag-scroll attribute to a scrollable element:

1@Component({
2  selector: 'sample',
3  template: ` <drag-scroll style="width: 100px; height: 10px"> Big text goes here... </drag-scroll> `,
4  styles: [
5    `
6    drag-scroll {
7      height: 50px
8      width: 100px
9    }
10    `
11  ]
12})
13class 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.

1@Component({
2  selector: 'sample',
3  template: `
4    <drag-scroll>
5      <img drag-scroll-item src="some-url" />
6      <img drag-scroll-item src="some-url" />
7      <img drag-scroll-item src="some-url" />
8    </drag-scroll>
9  `,
10  styles: [
11    `
12    drag-scroll {
13      height: 50px
14      width: 100px
15    }
16    img {
17      height: 50px
18      width: 50px
19    }
20    `
21  ]
22})
23class 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

1@Component({
2  selector: 'sample',
3  template: `
4    <drag-scroll #nav>
5      <img drag-scroll-item src="some-url" />
6      <img drag-scroll-item src="some-url" />
7      <img drag-scroll-item src="some-url" />
8    </drag-scroll>
9    <button (click)="moveLeft()">Left</button>
10    <button (click)="moveRight()">Right</button>
11    <button (click)="moveTo(2)">Last</button>
12  `
13})
14class Sample {
15  @ViewChild('nav', { read: DragScrollComponent }) ds: DragScrollComponent;
16
17  moveLeft() {
18    this.ds.moveLeft();
19  }
20
21  moveRight() {
22    this.ds.moveRight();
23  }
24
25  moveTo(index) {
26    this.ds.moveTo(index);
27  }
28
29  ngAfterViewInit() {
30    // Starting ngx-drag-scroll from specified index(3)
31    setTimeout(() => {
32      this.ds.moveTo(3);
33    }, 0);
34  }
35}

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 for more details.

License

MIT