scrollslider v1.0.9

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>