1.0.0 • Published 3 years ago
@zy2ba/ng-image-slider v1.0.0
Angular Image Slider with Lightbox, based on ng-image-slider
An Angular responsive image slider with lightbox popup. Also support youtube and mp4 video urls.
Angular versions compat:
Angular Version used to compile | Lib Version |
---|---|
11.2 | 1.0.0-rc.2 or above |
9.1 | 1.0.0-rc.0 — 1.0.0-rc.1 |
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
:
import { NgImageSliderModule } from '@zy2ba/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
import {NisSlide} from '@zy2bas/ng-image-slider'
imageObject: NisSlide[] = [{
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
}
];
Image, Youtube and MP4 url's object format
import {NisSlide} from '@zy2bas/ng-image-slider'
imageObject: NisSlide[] = [{
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'
}
...
];
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, 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 |
imageClick | @Output | number | Executes when click event on slider image. Return image index. | n/a |
arrowClick | @Output | ArrowClickEvent | Executes when click on slider left/right arrow. | n/a |
lightboxClose | @Output | void | Executes when lightbox close. | n/a |
lightboxArrowClick | @Output | ArrowClickEvent | Executes when click on lightbox next/previous arrow. | n/a |
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();
}
}
Differences from parent repo
- add loading="lazy" attribute to elements
- defines type of img item as NisSlide
- more typescriptly inside
Plans
- not errors on empty array
- give ability to not set loading="lazy"
- support SSR
- create based on storybook own examples, instead parent repo.
- make NisSlide as Ution type of NisSlideImage | NisSlideVideo | NisSlideYtVideo
License
As Angular itself, this module is released under the permissive MIT license.
Your contributions and suggestions are always welcome :)
1.0.0
3 years ago
1.0.0-rc.3
3 years ago
1.0.0-RC.2
3 years ago
1.0.0-rc.1
3 years ago
1.0.0-rc.0
3 years ago