ngx-slider
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.5 • Public • Published

    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

    Install

    npm i ngx-slider

    DownloadsWeekly Downloads

    289

    Version

    0.0.5

    License

    MIT

    Last publish

    Collaborators

    • somratexel