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": ,
Usage
- Import SliderModule:
;
- Import Slider to your desired component
;
Use Slider as follows for an example:
;;
- And then pass the slider object to the component as follows as an example:
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
Compatibility (tested with)
- Firefox (latest)
- Chrome (latest)
- Chromium (latest)
- Edge
- IE11
- Safari
License
- License: MIT
Author
- Author: somratexel
Keywords
- Slider
- Carousel
- Responsive
- Angular2
- Angular4