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';

2. 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;
  }
}

3. 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