Angular Responsive Image Slider With Lightbox Popup Library

angular-image-slider-with-lightbox-popup

Angular responsive image slider with Lightbox popup. Also, youtube and mp4 video URLs are supported.

angular image slider carousel, angular 9 image slider example, ngx image slider, angularmaterial image slider, image slider with lightbox popup

Features

  • Responsive (support image width and height in both % and px).
  • Captures swipes from phones and tablets.
  • Compatible with Angular Universal.
  • Popup image simplified view.
  • Captures keyboard next/previous arrow key event to move the lightbox image.
  • Support images (jpeg, jpg, gif, png, Base64-String), Youtube URL, MP4 video (URL, Base64-String).
  • Handling ArrayList Image Runtime Changes.

How to make use of it:

Installation:

npm install ng-image-slider --save

1. Import module in your app.module.ts:

import { NgImageSliderModule } from 'ng-image-slider';
...

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        NgImageSliderModule,
        ...
    ],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule {
}

2. Add components in your template file.

<ng-image-slider [images]="imageObject" #nav></ng-image-slider>

3. ImageObject format.

imageObject: Array<object> = [{
        image: 'assets/img/slider/1.jpg',
        thumbImage: 'assets/img/slider/1_min.jpeg',
        alt: 'alt of image',
        title: 'title of image'
    }, {
        image: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // Support base64 image
        thumbImage: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // Support base64 image
        title: 'Image title', //Optional: You can use this key if want to show image with title
        alt: 'Image alt', //Optional: You can use this key if want to show image with alt
        order: 1 //Optional: if you pass this key then slider images will be arrange according @input: slideOrderType
    }
];

4. URLs Image, Youtube, MP4 object format.

imageObject: Array<object> = [{
       video: 'https://youtu.be/6pxRHBw-k8M' // Youtube url
   },
   {
   	video: 'assets/video/movie.mp4', // MP4 Video url
   },
   {
   	video: 'assets/video/movie2.mp4',
       posterImage: 'assets/img/slider/2_min.jpeg', //Optional: You can use this key if you want to show video poster image in slider
       title: 'Image title'
   },
   {
   	image: 'assets/img/slider/1.jpg',
       thumbImage: 'assets/img/slider/1_min.jpeg',
       alt: 'Image alt'
   }
   ...
];

Angular Image Slider with Lightbox, ng-image-slider Plugin/Github


See Demo And Download

Official Website(sanjayV): Click Here

This superior jQuery/javascript plugin is developed by sanjayV. For extra Advanced Usages, please go to the official website.