ngx-drag-scroll
v18.0.0
Published
Lightweight drag to scroll library for Angular
Downloads
48,329
Readme
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.
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:
import { DragScrollComponent, DragScrollItemDirective } from 'ngx-drag-scroll';
...
@NgModule({
declarations: [
AppComponent
],
imports: [
DragScrollComponent,
DragScrollItemDirective,
...
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
Component:
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:
@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.
@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
@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 for more details.