nds

ngx-drag-scroll

A lightweight responsive Angular carousel library

Showing:

Popularity

Downloads/wk

8.9K

GitHub Stars

306

Maintenance

Last Commit

4mos ago

Contributors

26

Package

Dependencies

1

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Readme

Angular Draggable Carousel

Lightweight drag to scroll carousel for Angular

Maintainers wanted

npm version Monthly Download Build Status License MIT

Scroll on drag!

Scroll

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

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 {}

API REFERENCE

DragScrollComponent

NameTypeDescriptionDefault
scrollbar-hidden@InputWhether the scroll bar for this element is hidden.false
drag-scroll-disabled@InputWhether all draging and scrolling events is disabled.false
drag-scroll-x-disabled@InputWhether horizontally dragging and scrolling events is disabled.false
scroll-x-wheel-enabled@InputWhether scrolling horizontally with mouse wheel is enabledfalse
drag-scroll-y-disabled@InputWhether vertically dragging and scrolling events is disabled.false
drag-disabled@InputWhether draging is disabled.false
snap-disabled@InputWhether snapping is disabled.false
snap-offset@InputPixels of previous element to show on snap or moving left and right.0
snap-duration@InputDuration of snap animation in milliseconds.500
reachesLeftBound@OutputWhether reaching the left carousel bound.n/a
reachesRightBound@OutputWhether reaching the right carousel bound.n/a
dragStart@OutputExecutes when drag start.n/a
dragEnd@OutputExecutes when drag end.n/a
snapAnimationFinished@OutputThe snap animation for the new selection has finished.n/a
indexChanged@OutputExecutes when the current index of the carousel changes.n/a
dsInitialized@OutputExecutes when the drag scroll component has been initialized.n/a

DragScrollItemDirective

NameTypeDescriptionDefault
drag-disabled@InputWhether 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.

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial