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

You'll need to add DragScrollModule to your application module.

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

Add the drag-scroll attribute to a scrollable element:

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