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.