Home

Awesome

semantic-release Build NPM Version

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.

nametypedefaultdescription
blocksPerViewnumber1how many slides should be shown per view
slideTimenumber0on what interval should the slider auto slide (disabled if 0)
movesPerClicknumber1how many slides should be moved per click on the jpSlideArrow directive
initialSlidenumber0index of the first slide that should be in view when the component inits
loopbooleantrueshould the slider loop (clicking on the last slide takes you to the first one and vice versa
firstToLastTransitionbooleanfalseanimate 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

License

MIT © Jaspero co.