Elementary Slider

Installation

First of all, add elementary-uploader module as a dependency to your project:

npm install elementary-slider --save

Then include ElementarySliderModule.forRoot() and BrowserAnimationsModule into your main AppModule.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ElementarySliderModule } from 'elementary-slider';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ElementarySliderModule.forRoot(),
    ],
    declarations: [AppComponent],
})
export class AppModule {}

use ElementarySliderModule.forChild() into your SharedModule. This could be usefull if your project has nested Modules.

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ElementarySliderModule } from 'elementary-slider';
...
 
@NgModule({
  imports: [
    CommonModule,
    ElementarySliderModule.forChild(),
    ...
  ],
  exports: [
    CommonModule,
    ElementarySliderModule.forChild(),
    ...
  ],
  ...
})
export class SharedModule {}

Inputs

@Input() config: SliderConfig; // main config
@Input() images?: string[]; // optional images, if you want set images in template

Outputs

@Output() changeSlideIndex; // emitted when index slide changes

Config

• Types and Interfaces:

export type SliderConfig = {
    images?: string[]; // images url's
    backgroundColor?: string; // background color under images
    width?: IWidth;
    animationParams?: Partial<IAnimationParams>; 
    delay?: number; // if you set delay, slides will be changing automatically after set value (seconds)
    swiping?: boolean; // need install hammerjs
    loop?: boolean;
    withArrow?: boolean;
}

interface IWidth {
    value: number;
    unit: UnitTypes;
}

interface IAnimationParams {
    animationDuration: number;
    animationType: AnimationType;
}

• Default config (if you do not specify any parameter, it will be equal to the default value):

    images = [''];
    width = { value: 1024, unit: UnitTypes.Pixel };
    backgroundColor = 'transparent';
    animationParams = { animationDuration: 200, animationType: AnimationType.Slide };

• AnimationTypes it is enum and it can be Slide or Fade.
• UnitTypes it is enum and it can be Pixel or Percent.

WARNING

If you choose swiping === true, you would install hammerjs and add polyfills:

npm install hammerjs --save

// polyfills.ts

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.
import 'hammerjs';

#Example Component Code

import { Component } from '@angular/core';
import { SliderConfig } from 'elementary-slider';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    config: SliderConfig = {
        images: [
            'assets/slide_1.jpg',
            'assets/slide_2.jpg',
            'assets/slide_3.jpg',
            'assets/slide_4.jpg',
            'assets/slide_5.jpg',
        ],
        withArrow: true,
        loop: true,
    };
}

Template Code

<elementary-slider [config]="config"></elementary-slider>