VUI Image Gallery

npm install @vui/image-gallery

Basic Usage

import { VuiImageGalleryComponent } from '@vui/image-gallery';

@Component({
  template: `
    <ng-vui-image-gallery
      [images]="galleryImages"
      [showThumbnails]="true"
      [lightboxEnabled]="true"
      (imageClicked)="onImageClick($event)">
    </ng-vui-image-gallery>
  `
})
export class MyComponent {
  galleryImages = [
    { src: 'image1.jpg', alt: 'Description 1', title: 'Image 1' },
    { src: 'image2.jpg', alt: 'Description 2', title: 'Image 2' },
    { src: 'image3.jpg', alt: 'Description 3', title: 'Image 3' }
  ];
}

With Lightbox Navigation

@Component({
  template: `
    <ng-vui-image-gallery
      [images]="images"
      [lightboxEnabled]="true"
      [showNavigation]="true"
      [showDots]="true"
      [autoPlay]="false">
    </ng-vui-image-gallery>
  `
})
export class GalleryExample {
  images = [
    { 
      src: 'assets/images/photo1.jpg',
      thumbnail: 'assets/images/thumb1.jpg', 
      alt: 'Beautiful landscape',
      title: 'Mountain View'
    }
  ];
}