scrollslider
adds smoothscrolling and scroll buttons if component has overflowing content, needs angular > 2.*
Last updated 4 years ago by emolr .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install scrollslider 
SYNC missed versions from official npm registry.

Scrollslider

A simple to use and roughly unstyled component that wraps content and adds buttons to navigate with smoothscrolling if content overflows horizontally.

Install

Install the module via npm:

npm install scrollslider --save

Import

...
import { ScrollsliderModule } from 'scrollslider';
...
@NgModule({
  imports: [
      ...
      ScrollsliderModule,
      ...
    ],
  ...

Usage

In a template use:

<app-scrollslider>
  <!-- example content -->
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    ...
  </ul>
  <!-- example content end -->
</app-scrollslider>

NB. Make sure the content you wrap with app-scrollslider has white-space: nowrap if it's a list.

Custom Buttons

transclude buttons:

<app-scrollslider>
  <!-- example content -->
  ...
  <button leftButtonContent #leftButton>
    Left button
  </button>
  <button rightButtonContent #rightButton>
    Right button
  </button>
  <!-- example content end -->
</app-scrollslider>

Both "leftButtonContent" & "#leftButton" attributes are needed when making a custom left button

Responsive

Hide buttons on small screens:

<app-scrollslider [showButtonsFrom]="400">
  ...
</app-scrollslider>

400 represents the pixel value of it's own width, all widths below 400 will hide buttons

Attributes

In a template:

<app-scrollslider
  [behavior]="'auto'"
  [duration]="200"
  [scrollLength]="300"
  [scrollerTrackClasses]="'ws-medium'" // example classes
  [buttonClasses]="'button button-primary'" // example classes
  [layout]="'split'">
  ...
</app-scrollslider>
Attribute Type Description
behavior string ('auto' or 'static') Auto: Show the buttons only if the container has overflowing content
Static: Show the buttons always
duration number The duration it scrolls on button click (milliseconds)
scrollLength number How far it scrolls on button click (pixels)
buttonClasses string Add custom classes to the buttons for custom button styling
scrollerTrackClasses string Add custom classes to the track where the content is located
layout string ('default' or 'split') Default: Places the button to the right side
Split: Places the track between the nav buttons
showButtonsFrom number Hides the buttons below the window pixel width value written here

Current Tags

  • 1.0.9                                ...           latest (4 years ago)

10 Versions

  • 1.0.9                                ...           4 years ago
  • 1.0.8                                ...           4 years ago
  • 1.0.7                                ...           4 years ago
  • 1.0.6                                ...           4 years ago
  • 1.0.5                                ...           4 years ago
  • 1.0.4                                ...           4 years ago
  • 1.0.3                                ...           4 years ago
  • 1.0.2                                ...           4 years ago
  • 1.0.1                                ...           4 years ago
  • 1.0.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 12
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |