NG Slider

A slider library for Angular

Installation

To install this library, run:

$ npm install --save @jaspero/ng-slider

Setup

Import JpSliderModule in to your @NgModule:

@NgModule({
    imports: [
        JpSliderModule
    ],
    ...
})
export class AppModule {}

You can also provide default slider configuration options when importing the module

@NgModule({
    imports: [
        JpSliderModule.defaultOptions(options)
    ],
    ...
})

Now you can use the slider in your components like this:

<jp-slider [options]="options">
  <jp-slides>
    <jp-slide>
      <h1>Slide 1</h1>
      <p>Content 1</p>
    </jp-slide>
    <jp-slide>
      <h1>Slide 2</h1>
      <p>Content 2</p>
    </jp-slide>
  </jp-slides>
  <jp-slide-pagination></jp-slide-pagination>
  <button jpSlideArrow="left">Left</button>
  <button jpSlideArrow="right">Right</button>
</jp-slider>

Configuration

Options

You can provide default global options when importing the slider module JpSliderModule.defaultOptions(options) or on the jp-slider component <jp-slider [options]="options">. Options provided through the component input are merged with default options with component options overriding the default ones.

| name | type | default | description | | --------------------- | ------- | ------- | -------------------------------------------------------------------------------------------- | | blocksPerView | number | 1 | how many slides should be shown per view | | slideTime | number | 0 | on what interval should the slider auto slide (disabled if 0) | | movesPerClick | number | 1 | how many slides should be moved per click on the jpSlideArrow directive | | initialSlide | number | 0 | index of the first slide that should be in view when the component inits | | loop | boolean | true | should the slider loop (clicking on the last slide takes you to the first one and vice versa | | firstToLastTransition | boolean | false | animate transition between first and last slide (performance intensive) |

Events

Customization

The library ships with bare minimum styles. This is all there is to it:

// jp-slider component
:host {
  display: block;
  height: 100%;
  width: 100%;
}

.jp-s-w {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.jp-s-w-i {
  position: relative;
  height: 100%;
  display: flex;
  transition: 0s;
  &.active {
    transition: 0.3s;
  }
}

This is to allow for all kinds of customizations, with the downside being that no styles are provided out of the box.

Caveats

• If hammer is enabled and you need click events in a slide use (tap) instead of (click). Hammer has a bug where it registers the click event after pan ends, there are a lot of issues documenting this behaviour, here is one example: https://github.com/hammerjs/hammer.js/issues/815

License

MIT © Jaspero co.