JSPM – ngx-slider@0.0.5

Package Exports

ngx-slider

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NgxSlider

This project is a carousel slider with some basic configuration for Angular 4

GitHub

https://github.com/somratexel/ngx-slider

Demo

https://somratexel.github.io/ngx-slider

Package:

https://www.npmjs.com/package/ngx-slider

Install

npm install ngx-slider --save

Dependencies

This project has dependency on font awesome. Add font awesome to your project if it does now added yet. To add font awesome do the following:

run :

npm install font-awesome --save

If your app build on angular CLI then you can edit angular-cli.json file as follows:

"styles": [
        "../node_modules/font-awesome/css/font-awesome.min.css"
      ],

Usage

Import SliderModule:

import { SliderModule } from 'ngx-slider';

Import Slider to your desired component

import { Slider } from 'ngx-slider';

Use Slider as follows for an example:

import { Component, OnInit } from '@angular/core';
import { Slider } from 'ngx-slider';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  public slider = new Slider();

  constructor() {
    this.slider.config.loop = true;
    this.slider.config.showPreview = false;
  }

  ngOnInit() {

    const slideItems = [
      { src: 'https://placeimg.com/600/600/any', title: 'Title 1' },
      { src: 'https://placeimg.com/600/600/nature', title: 'Title 2' },
      { src: 'https://placeimg.com/600/600/sepia', title: 'Title 3' },
      { src: 'https://placeimg.com/600/600/people', title: 'Title 4' },
      { src: 'https://placeimg.com/600/600/tech', title: 'Title 5' }
    ];

    this.slider.items = slideItems;
  }
}

And then pass the slider object to the component as follows as an example:

<div style="height: 400px;">
  <ngx-slider [init]="slider"></ngx-slider>
</div>

Make sure the comopents parent element has a height.

Configuration

Available options are listed blow:

Option	Default	Type	Description
showDots	true	boolean
showNavigator	true	boolean
showTitle	true	boolean
loop	true	boolean
showPreview	true	boolean
numberOfPreview	2	number
previewWidth	50	number	px
transitionDuration	1	number	second

You can confirure the optins as follows:

public slider = new Slider();

  constructor() {
    this.slider.config.loop = true;
    this.slider.config.showPreview = false;
    this.slider.config.transitionDuration = 3;
  }

Compatibility (tested with)

Firefox (latest)
Chrome (latest)
Chromium (latest)
Edge
IE11
Safari

License

License: MIT

Author

Author: somratexel

Keywords

Slider
Carousel
Responsive
Angular2
Angular4