ngx-slider

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

Stats

StarsIssuesVersionUpdatedCreatedSize
ngx-slider
0.0.54 years ago4 years agoMinified + gzip package size for ngx-slider in KB

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

  1. Import SliderModule:
import { SliderModule } from 'ngx-slider';
  1. 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;
  }
}
  1. 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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.