Angular Image Slider with Lightbox
An Angular responsive image slider with lightbox popup. Also support youtube and mp4 video urls.
Features!
- Responsive
- 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, Youtube and MP4 video url's
https://sanjayv.github.io/ng-image-slider/
Demo:Installation
npm install ng-image-slider
Setup :
Import module in your app.module.ts
:
;...
Add component in your template file.
ImageObject format
imageObject: Array<object> = image: 'assets/img/slider/1.jpg' thumbImage: 'assets/img/slider/1_min.jpeg' image: 'assets/img/slider/2.jpg' thumbImage: 'assets/img/slider/2_min.jpeg' title: 'Image with title' //Optional: You can use this key if you want to show title ;
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 title: 'Video with title' //Optional: You can use this key if you want to show Video with title 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: 'Video with title and poster image.' image: 'assets/img/slider/1.jpg' thumbImage: 'assets/img/slider/1_min.jpeg' ...;
API Reference (optional) :
Name | Type | Data Type | Description | Default |
---|---|---|---|---|
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 and height. Pass object like {width: 400, height: 300} |
{width: 205, height: 200} |
autoSlide | @Input | number | Auto slide images according provided time. Option will work only if infinite option is true. Minimum value is 1 second and Maximum value is 5 second. | 0 |
showArrow | @Input | boolean | Hide/Show slider arrow buttons | true |
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. | n/a |
lightboxArrowClick | @Output | n/a | Executes when click on lightbox next/previous arrow. | n/a |
Add custom navigation button
;
License
As Angular itself, this module is released under the permissive MIT license.
Your contributions and suggestions are always welcome :)