Home

Awesome

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!

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:

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

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

export class AppModule {
}

Add component in your template file.

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

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
    }
];

Image, Youtube and MP4 url's 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'
   }
   ...
];

**Note :

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

"compilerOptions": {
    "skipLibCheck": true
}

API Reference (optional) :

NameTypeData TypeDescriptionDefault
fallbackImage@InputobjectSets fallback image for image load errors. See fallbackImage Input format below.null
infinite@InputbooleanInfinite sliding images if value is true.false
imagePopup@InputbooleanEnable image lightBox popup option on slider image click.true
animationSpeed@InputnumberBy this user can set slider animation speed. Minimum value is 0.1 second and Maximum value is 5 second.1
slideImage@InputnumberSet how many images will move on left/right arrow click.1
imageSize@InputobjectSet 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@InputbooleanShow images with aspect ratio if value is true and set imageSize width and height on parent divfalse
autoSlide@Inputnumber/boolean/objectAuto 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@InputbooleanHide/Show slider arrow buttonstrue
arrowKeyMove@InputbooleanDisable slider and popup image left/right move on arrow key press event, if value is falsetrue
videoAutoPlay@InputbooleanAuto play popup videofalse
showVideoControls@InputbooleanHide video control if value is falsetrue
direction@InputstringSet text direction. You can pass rtl / ltr / autoltr
slideOrderType@InputstringArrange slider images in Ascending order by ASC and in Descending order by DESC. order key must be exist with image object.ASC
lazyLoading@InputbooleanLazy load images and Iframe if true.false
defaultActiveImage@InputnumberSet image as selected on load.null
imageClick@Outputn/aExecutes when click event on slider image. Return image index.n/a
arrowClick@Outputn/aExecutes when click on slider left/right arrow. Returns current event name and next/previous button disabled status.n/a
lightboxClose@Outputn/aExecutes when lightbox close.n/a
lightboxArrowClick@Outputn/aExecutes when click on lightbox next/previous arrow.n/a

fallbackImage Input Format

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

Add custom navigation button

import { NgImageSliderComponent } from 'ng-image-slider';

@Component({
    selector: 'sample',
        template:`
        <ng-image-slider [images]="imageObject" #nav>
        </ng-image-slider>
        <button (click)="prevImageClick()">Prev</button>
        <button (click)="nextImageClick()">Next</button>
        `
})
class Sample {
    @ViewChild('nav') slider: NgImageSliderComponent;
    imageObject = [{...}]

    prevImageClick() {
        this.slider.prev();
    }

    nextImageClick() {
        this.slider.next();
    }
}

License

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

Your contributions and suggestions are always welcome :)