Angular Image slider with lightbox. An Angular responsive image slider with lightbox popup. Also support youtube url, image base64 string and mp4 video urls and base64 string.
npm install ng-image-sliderAn Angular responsive image slider with lightbox popup.
Also support youtube and mp4 video urls.
(Compatible with Angular Version: 18)
- 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
npm install ng-image-slider --saveImport module in your app.module.ts:
``typescript
import { NgImageSliderModule } from 'ng-image-slider';
...
@NgModule({
declarations: [
AppComponent
],
imports: [
NgImageSliderModule,
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
`
Add component in your template file.
`html`
ImageObject format
`js`
imageObject: Array
Image, Youtube and MP4 url's object format
`js`
imageObject: Array
#### **Note :
For angular version 8 or less, use "skipLibCheck": true in tsconfig.json for prevent ambient context issue.`js`
"compilerOptions": {
"skipLibCheck": true
}
| 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} |true
| manageImageRatio | @Input | boolean | Show images with aspect ratio if value is and set imageSize width and height on parent div | false |{interval: 2, stopOnHover: 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. | 0 |false
| 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 | true |false
| videoAutoPlay | @Input | boolean | Auto play popup video | false |
| showVideoControls | @Input | boolean | Hide video control if value is | true |ASC
| direction | @Input | string | Set text direction. You can pass rtl / ltr / auto | ltr |
| slideOrderType | @Input | string | Arrange slider images in Ascending order by 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 |
{
"image": "./slider/mainImage.jpg",
"thumbImage": "./slider/thumbImage.jpg"
}
Add custom navigation button
typescript
import { NgImageSliderComponent } from 'ng-image-slider';@Component({
selector: 'sample',
template:
})
class Sample {
@ViewChild('nav') slider: NgImageSliderComponent;
imageObject = [{...}] prevImageClick() {
this.slider.prev();
}
nextImageClick() {
this.slider.next();
}
}
Your contributions and suggestions are always welcome :)