Angular 2/5 Image-slider or image-gallary

Angular Image slider used Angular-CLI. I have created a gallary directive which accept some gallary configuration via attribute.

You can just add directive file in your project and use the below code in Template file:

Directive name: 'gallarySlide'

BreakPoint: using 'item-md=4' 'item-sm=2' 'item-xs' attribute

.html file:

<div class="row">
      <div class="gallary-wrap" gallarySlide="item" gallaryBoxID="items" 
      item-md=4 item-sm=2 item-xs=1>
          <div class="items" id="items">
            <div *ngFor="let image of gallaryimage" class="item">
                <a href="https://www.onwebg.com/" target="_blank">
                <img src="assets/images/{{image.image}}" alt="{{ image.title }}">
              </a>
            </div>
          </div>
          <div class="slider-controller">
            <button class="prevbtn slideBtn">Prev</button>
            <button class="nextbtn slideBtn">next</button>
          </div>
      </div>
  </div>

.ts file

import { Component, OnInit } from '@angular/core';
import { GallaryService } from  './gallary.service'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  activeUsers:String[];
  inactiveUsers:String[];
  gallaryimage:object;
  constructor(private gallaryservice:GallaryService){
    
  }
  ngOnInit() {
    this.gallaryimage=this.gallaryservice.images;
  }
}

.css file

use gallary css using Flex-layout (Css code in app.component.css)

hammerJs

I used hammerJs for swipe event which make slider mobile friendly as well.

npm i hammerjs --save

and add js file to .angular-cli.json file:

 "scripts": [
        "../node_modules/hammerjs/hammer.min.js"
      ],

This project was generated with Angular CLI version 1.5.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

prasenjitjsr/angular2-5-image-slider-image-gallary