ngx-slider

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