Lightweight drag to scroll carousel for Angular
Scroll on drag!
Try out the demo!
You can get it on npm.
npm install ngx-drag-scroll --save
This project needs Angular 5+
as dependencies though.
You’ll need to add DragScrollModule
to your application module.
import { DragScrollModule } from 'ngx-drag-scroll';
...
@NgModule({
declarations: [
AppComponent
],
imports: [
DragScrollModule,
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
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 {}
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 |
Name | Type | Description | Default |
---|---|---|---|
drag-disabled | @Input | Whether draging on the item is disabled. | false |
@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);
}
}
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.
Author: bfwg
Live Demo: https://ngx-drag-scroll.fanjin.io/
GitHub: https://github.com/bfwg/ngx-drag-scroll
#angular #javascript #angularjs