Angular Image Slider with Lightbox

An Angular responsive image slider with lightbox popup. Also support youtube and mp4 video urls.

(Compatible with Angular Version: 18)

Features!

• Responsive (support images width and height in both % and px)
• captures swipes from phones and tablets
• Compatible with Angular Universal
• Image lightbox popup
• captures keyboard next/previous arrow key event for lightbox image move
• Support Images (jpeg, jpg, gif, png and Base64-String), Youtube url and MP4 video (url and Base64-String)
• Handling runtime image arraylist changes

Demo: https://sanjayv.github.io/ng-image-slider/

code example:

Images: https://stackblitz.com/edit/ng-image-slider-demo

video: https://stackblitz.com/edit/ng-image-slider-video-demo

Installation

npm install ng-image-slider --save

Setup :

Import module in your app.module.ts:

1import { NgImageSliderModule } from 'ng-image-slider';
2...
3
4@NgModule({
5    declarations: [
6        AppComponent
7    ],
8    imports: [
9        NgImageSliderModule,
10        ...
11    ],
12    providers: [],
13    bootstrap: [AppComponent]
14})
15
16export class AppModule {
17}
18

Add component in your template file.

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

ImageObject format

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

Image, Youtube and MP4 url's object format

1imageObject: Array<object> = [{
2       video: 'https://youtu.be/6pxRHBw-k8M' // Youtube url
3   },
4   {
5   	video: 'assets/video/movie.mp4', // MP4 Video url
6   },
7   {
8   	video: 'assets/video/movie2.mp4',
9       posterImage: 'assets/img/slider/2_min.jpeg', //Optional: You can use this key if you want to show video poster image in slider
10       title: 'Image title'
11   },
12   {
13   	image: 'assets/img/slider/1.jpg',
14       thumbImage: 'assets/img/slider/1_min.jpeg',
15       alt: 'Image alt'
16   }
17   ...
18];

**Note :

For angular version 8 or less, use "skipLibCheck": true in tsconfig.json for prevent ambient context issue.

1"compilerOptions": {
2    "skipLibCheck": true
3}

API Reference (optional) :

Name	Type	Data Type	Description	Default
fallbackImage	@Input	object	Sets fallback image for image load errors. See fallbackImage Input format below.	null
infinite	@Input	boolean	Infinite sliding images if value is true.	false
imagePopup	@Input	boolean	Enable image lightBox popup option on slider image click.	true
animationSpeed	@Input	number	By this user can set slider animation speed. Minimum value is 0.1 second and Maximum value is 5 second.	1
slideImage	@Input	number	Set how many images will move on left/right arrow click.	1
imageSize	@Input	object	Set slider images width, height and space. space is use for set space between slider images. Pass object like {width: '400px', height: '300px', space: 4} or you can pass value in percentage {width: '20%', height: '20%'} OR set only space {space: 4}	{width: 205, height: 200, space: 3}
manageImageRatio	@Input	boolean	Show images with aspect ratio if value is true and set imageSize width and height on parent div	false
autoSlide	@Input	number/boolean/object	Auto slide images according provided time interval. Option will work only if infinite option is true. For number data type minimum value is 1 second and Maximum value is 5 second. By object data type you can prevent auto slide stop behaviour on mouse hover event. {interval: 2, stopOnHover: false}	0
showArrow	@Input	boolean	Hide/Show slider arrow buttons	true
arrowKeyMove	@Input	boolean	Disable slider and popup image left/right move on arrow key press event, if value is false	true
videoAutoPlay	@Input	boolean	Auto play popup video	false
showVideoControls	@Input	boolean	Hide video control if value is false	true
direction	@Input	string	Set text direction. You can pass rtl / ltr / auto	ltr
slideOrderType	@Input	string	Arrange slider images in Ascending order by ASC and in Descending order by DESC. order key must be exist with image object.	ASC
lazyLoading	@Input	boolean	Lazy load images and Iframe if true.	false
defaultActiveImage	@Input	number	Set image as selected on load.	null
imageClick	@Output	n/a	Executes when click event on slider image. Return image index.	n/a
arrowClick	@Output	n/a	Executes when click on slider left/right arrow. Returns current event name and next/previous button disabled status.	n/a
lightboxClose	@Output	n/a	Executes when lightbox close.	n/a
lightboxArrowClick	@Output	n/a	Executes when click on lightbox next/previous arrow.	n/a

fallbackImage Input Format

{
    "image": "./slider/mainImage.jpg",
    "thumbImage": "./slider/thumbImage.jpg"
}

Add custom navigation button

1import { NgImageSliderComponent } from 'ng-image-slider';
2
3@Component({
4    selector: 'sample',
5        template:`
6        <ng-image-slider [images]="imageObject" #nav>
7        </ng-image-slider>
8        <button (click)="prevImageClick()">Prev</button>
9        <button (click)="nextImageClick()">Next</button>
10        `
11})
12class Sample {
13    @ViewChild('nav') slider: NgImageSliderComponent;
14    imageObject = [{...}]
15
16    prevImageClick() {
17        this.slider.prev();
18    }
19
20    nextImageClick() {
21        this.slider.next();
22    }
23}

License

As Angular itself, this module is released under the permissive MIT license.

Your contributions and suggestions are always welcome :)