A simple to use and roughly unstyled component that wraps content and adds buttons to navigate with smoothscrolling if content overflows horizontally.
Install the module via npm:
npm install scrollslider --save
...
import { ScrollsliderModule } from 'scrollslider';
...
@NgModule({
imports: [
...
ScrollsliderModule,
...
],
...
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.
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
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
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 pixel value written here |