Angular Bootstrap Gallery

Angular Gallery - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

Angular Bootstrap gallery is a component with great UI and UX values. With it you can combine beautiful and stunning images with your website or application!

Easy to construct in a form of a lightbox gallery, multi item carousel or slides with caption.

Examples of Bootstrap gallery use:

Popular paintings on a museum website
Landscape photos in traveling blog
The best pieces of work in a portfolio

All of the above can be easily created by following those examples:

Required screenfull library

Using lightbox requires you to have installed the Screenfull library. Install it using the following command, and then add it to your imports in angular.json. This process is described in Quickstart Guide.

Show code

Terminal

        
            
        npm install --save screenfull@3.3.0

Lightbox gallery MDB Pro component

Show code

HTML
Typescript

        
            
          <div class="row">
            <mdb-image-modal [modalImages]="imagesBasic" type="no-margin"></mdb-image-modal>
          </div>

        
            
          import { Component} from '@angular/core';

          @Component({
            selector: 'lightbox-basic-example',
            templateUrl: 'lightbox-basic.html',
          })
          export class LightboxBasicComponent {
            imagesBasic = [
              { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).webp', description: 'Image 1' },
              { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).webp', description: 'Image 2' },
              { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).webp', description: 'Image 3' },
              { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).webp', description: 'Image 4' },
              { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).webp', description: 'Image 5' },
              { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).webp', description: 'Image 6' },
              { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).webp', description: 'Image 7' },
              { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).webp', description: 'Image 8' },
              { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).webp', description: 'Image 9' }
            ];
          }

Lightbox gallery with gutters MDB Pro component

Show code

HTML
Typescript

        
            
          <div class="row">
            <mdb-image-modal [modalImages]="images" type="margin"></mdb-image-modal>
          </div>

        
            
          import { Component} from '@angular/core';

          @Component({
            selector: 'lightbox-margin-example',
            templateUrl: 'lightbox-margin.html',
          })
          export class LightboxMarginComponent {
            images = [
              { img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).webp', description: 'Image 1' },
              { img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).webp', description: 'Image 2' },
              { img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).webp', description: 'Image 3' },
              { img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).webp', description: 'Image 4' },
              { img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).webp', description: 'Image 5' },
              { img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).webp', description: 'Image 6' },
              { img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).webp', description: 'Image 7' },
              { img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).webp', description: 'Image 8' },
              { img: 'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).webp', thumb:
              'https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).webp', description: 'Image 9' }
            ];
          }

Multi-item carousel gallery MDB Pro component

Show code

HTML
Typescript
SCSS

        
            
          <mdb-carousel [isControls]="true" class="carousel-multi-item multi-animation" [type]="'carousel-multi-item'" [animation]="'slide'">
            <mdb-carousel-item *ngFor="let item of slides; let i = index">
              <div class="col-md-4" [ngClass]="{'d-none d-md-block': cardIndex !== 0}"
                   *ngFor="let card of item; let cardIndex = index">
                <mdb-card class="my-1">
                  <mdb-card-img [src]="card.img" alt="Card image cap"></mdb-card-img>
                </mdb-card>
              </div>
            </mdb-carousel-item>
          </mdb-carousel>

        
            
          import {AfterViewInit, Component, OnInit, Renderer2} from '@angular/core';

          @Component({
            selector: 'multi-item-gallery',
            templateUrl: './multi-item-gallery.component.html',
            styleUrls: ['./multi-item-gallery.component.scss']
          })
          export class MultiItemGalleryComponent implements OnInit, AfterViewInit {
            cards = [
              {img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).webp'},
              {img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).webp'},
              {img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).webp'},
              {img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).webp'},
              {img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).webp'},
              {img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).webp'},
              {img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).webp'},
              {img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).webp'},
              {img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).webp'},
            ];

            slides: any = [[]];

            constructor(private renderer: Renderer2) { }

            chunk(arr: any, chunkSize: number) {
              let R = [];
              for (let i = 0, len = arr.length; i < len; i += chunkSize) {
                R.push(arr.slice(i, i + chunkSize));
              }
              return R;
            }

            ngOnInit() {
              this.slides = this.chunk(this.cards, 3);
            }

            ngAfterViewInit() {
              const buttons = document.querySelectorAll('.btn-floating');
              buttons.forEach((el: any) => {
                this.renderer.removeClass(el, 'btn-floating');
                this.renderer.addClass(el, 'px-3');
                this.renderer.addClass(el.firstElementChild, 'fa-3x');
              });
            }
          }

        
            
          .carousel-indicators {
            display: none;
          }

Gallery with modals MDB Pro component

Show code

HTML

        
            
          <div class="row">
            <div class="col-md-4 mx-auto my-5">
              <a><img (click)="video1.show()" class="img-fluid z-depth-1"
                      src="https://mdbootstrap.com/img/screens/yt/screen-video-1.webp"
                      alt="video"></a>
            </div>
            <div class="col-md-4 mx-auto my-5">
              <a><img (click)="video2.show()" class="img-fluid z-depth-1"
                      src="https://mdbootstrap.com/img/screens/yt/screen-video-2.webp"
                      alt="video"></a>
            </div>
            <div class="col-md-4 mx-auto my-5">
              <a><img (click)="video3.show()" class="img-fluid z-depth-1"
                      src="https://mdbootstrap.com/img/screens/yt/screen-video-3.webp"
                      alt="video"></a>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 mx-auto my-5">
              <a><img (click)="video4.show()" class="img-fluid z-depth-1"
                      src="https://mdbootstrap.com/img/screens/yt/screen-video-4.webp"
                      alt="video"></a>
            </div>
            <div class="col-md-4 mx-auto my-5">
              <a><img (click)="video5.show()" class="img-fluid z-depth-1"
                      src="https://mdbootstrap.com/img/screens/yt/screen-video-5.webp"
                      alt="video"></a>
            </div>
            <div class="col-md-4 mx-auto my-5">
              <a><img (click)="video6.show()" class="img-fluid z-depth-1"
                      src="https://mdbootstrap.com/img/screens/yt/screen-video-6.webp"
                      alt="video"></a>
            </div>
          </div>
          <div mdbModal #video1="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog"
               aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <!--Content-->
              <div class="modal-content">
                <!--Body-->
                <div class="modal-body mb-0 p-0">
                  <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U"
                            allowfullscreen></iframe>
                  </div>
                </div>
                <!--Footer-->
                <div class="modal-footer justify-content-center flex-column flex-md-row">
                  <span class="mr-4">Spread the word!</span>
                  <div>
                    <a type="button" mdbBtn floating="true" size="sm" color="fb" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="facebook-f"></mdb-icon>
                    </a>
                    <!--Twitter-->
                    <a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="twitter"></mdb-icon>
                    </a>
                    <!--Google +-->
                    <a type="button" mdbBtn floating="true" size="sm" color="gplus" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="google-plus"></mdb-icon>
                    </a>
                    <!--Linkedin-->
                    <a type="button" mdbBtn floating="true" size="sm" color="ins" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="linkedin-in"></mdb-icon>
                    </a>
                  </div>
                  <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                          mdbWavesEffect (click)="video1.hide()">Close
                  </button>
                </div>
              </div>
              <!--/.Content-->
            </div>
          </div>
          <div mdbModal #video2="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog"
               aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <!--Content-->
              <div class="modal-content">
                <!--Body-->
                <div class="modal-body mb-0 p-0">
                  <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/wTcNtgA6gHs"
                            allowfullscreen></iframe>
                  </div>
                </div>
                <!--Footer-->
                <div class="modal-footer justify-content-center flex-column flex-md-row">
                  <span class="mr-4">Spread the word!</span>
                  <div>
                    <a type="button" mdbBtn floating="true" size="sm" color="fb" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="facebook-f"></mdb-icon>
                    </a>
                    <!--Twitter-->
                    <a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="twitter"></mdb-icon>
                    </a>
                    <!--Google +-->
                    <a type="button" mdbBtn floating="true" size="sm" color="gplus" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="google-plus"></mdb-icon>
                    </a>
                    <!--Linkedin-->
                    <a type="button" mdbBtn floating="true" size="sm" color="ins" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="linkedin-in"></mdb-icon>
                    </a>
                  </div>
                  <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                          mdbWavesEffect (click)="video2.hide()">Close
                  </button>
                </div>
              </div>
              <!--/.Content-->
            </div>
          </div>
          <div mdbModal #video3="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog"
               aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <!--Content-->
              <div class="modal-content">
                <!--Body-->
                <div class="modal-body mb-0 p-0">
                  <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM"
                            allowfullscreen></iframe>
                  </div>
                </div>
                <!--Footer-->
                <div class="modal-footer justify-content-center flex-column flex-md-row">
                  <span class="mr-4">Spread the word!</span>
                  <div>
                    <a type="button" mdbBtn floating="true" size="sm" color="fb" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="facebook-f"></mdb-icon>
                    </a>
                    <!--Twitter-->
                    <a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="twitter"></mdb-icon>
                    </a>
                    <!--Google +-->
                    <a type="button" mdbBtn floating="true" size="sm" color="gplus" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="google-plus"></mdb-icon>
                    </a>
                    <!--Linkedin-->
                    <a type="button" mdbBtn floating="true" size="sm" color="ins" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="linkedin-in"></mdb-icon>
                    </a>
                  </div>
                  <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                          mdbWavesEffect (click)="video3.hide()">Close
                  </button>
                </div>
              </div>
              <!--/.Content-->
            </div>
          </div>
          <div mdbModal #video4="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog"
               aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <!--Content-->
              <div class="modal-content">
                <!--Body-->
                <div class="modal-body mb-0 p-0">
                  <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM"
                            allowfullscreen></iframe>
                  </div>
                </div>
                <!--Footer-->
                <div class="modal-footer justify-content-center flex-column flex-md-row">
                  <span class="mr-4">Spread the word!</span>
                  <div>
                    <a type="button" mdbBtn floating="true" size="sm" color="fb" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="facebook-f"></mdb-icon>
                    </a>
                    <!--Twitter-->
                    <a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="twitter"></mdb-icon>
                    </a>
                    <!--Google +-->
                    <a type="button" mdbBtn floating="true" size="sm" color="gplus" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="google-plus"></mdb-icon>
                    </a>
                    <!--Linkedin-->
                    <a type="button" mdbBtn floating="true" size="sm" color="ins" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="linkedin-in"></mdb-icon>
                    </a>
                  </div>
                  <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                          mdbWavesEffect (click)="video4.hide()">Close
                  </button>
                </div>
                <!--/.Content-->
              </div>
            </div>
          </div>
          <div mdbModal #video5="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog"
               aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <!--Content-->
              <div class="modal-content">
                <!--Body-->
                <div class="modal-body mb-0 p-0">
                  <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/wTcNtgA6gHs"
                            allowfullscreen></iframe>
                  </div>
                </div>
                <!--Footer-->
                <div class="modal-footer justify-content-center flex-column flex-md-row">
                  <span class="mr-4">Spread the word!</span>
                  <div>
                    <a type="button" mdbBtn floating="true" size="sm" color="fb" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="facebook-f"></mdb-icon>
                    </a>
                    <!--Twitter-->
                    <a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="twitter"></mdb-icon>
                    </a>
                    <!--Google +-->
                    <a type="button" mdbBtn floating="true" size="sm" color="gplus" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="google-plus"></mdb-icon>
                    </a>
                    <!--Linkedin-->
                    <a type="button" mdbBtn floating="true" size="sm" color="ins" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="linkedin-in"></mdb-icon>
                    </a>
                  </div>
                  <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                          mdbWavesEffect (click)="video5.hide()">Close
                  </button>
                </div>
                <!--/.Content-->
              </div>
            </div>
          </div>
          <div mdbModal #video6="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog"
               aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <!--Content-->
              <div class="modal-content">
                <!--Body-->
                <div class="modal-body mb-0 p-0">
                  <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM"
                            allowfullscreen></iframe>
                  </div>
                </div>
                <!--Footer-->
                <div class="modal-footer justify-content-center flex-column flex-md-row">
                  <span class="mr-4">Spread the word!</span>
                  <div>
                    <a type="button" mdbBtn floating="true" size="sm" color="fb" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="facebook-f"></mdb-icon>
                    </a>
                    <!--Twitter-->
                    <a type="button" mdbBtn floating="true" size="sm" color="tw" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="twitter"></mdb-icon>
                    </a>
                    <!--Google +-->
                    <a type="button" mdbBtn floating="true" size="sm" color="gplus" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="google-plus"></mdb-icon>
                    </a>
                    <!--Linkedin-->
                    <a type="button" mdbBtn floating="true" size="sm" color="ins" class="waves-light" mdbWavesEffect>
                      <mdb-icon fab icon="linkedin-in"></mdb-icon>
                    </a>
                  </div>
                  <button type="button" mdbBtn color="primary" outline="true" rounded="true" class="ml-4 waves-light"
                          mdbWavesEffect (click)="video6.hide()">Close
                  </button>
                </div>
              </div>
              <!--/.Content-->
            </div>

Video gallery

Show code

HTML

        
            
          <!--Carousel Wrapper-->
          <mdb-carousel [isControls]="true" class="carousel slide carousel-fade" [animation]="'fade'">
            <!--First slide-->
            <mdb-carousel-item>
              <video class="video-fluid" autoplay loop>
                <source src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4"/>
              </video>
            </mdb-carousel-item>
            <!--/First slide-->
            <!--Second slide-->
            <mdb-carousel-item>
              <video class="video-fluid" autoplay loop>
                <source src="https://mdbootstrap.com/img/video/forest.mp4" type="video/mp4"/>
              </video>
            </mdb-carousel-item>
            <!--/Second slide-->
            <!--Third slide-->
            <mdb-carousel-item>
              <video class="video-fluid" autoplay loop>
                <source src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4"/>
              </video>
            </mdb-carousel-item>
            <!--/Third slide-->
          </mdb-carousel>
          <!--Carousel Wrapper-->

Gallery with slides and captions

Show code

HTML

        
            
          <!--Carousel Wrapper-->
          <mdb-carousel [isControls]="true" class="carousel slide carousel-fade" [animation]="'fade'">
            <!--First slide-->
            <mdb-carousel-item>
              <div class="view w-100">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).webp"
                     alt="First slide">
                <div class="mask rgba-black-light waves-light" mdbWavesEffect></div>
              </div>
              <div class="carousel-caption">
                <h3 class="h3-responsive">Light mask</h3>
                <p>First text</p>
              </div>
            </mdb-carousel-item>
            <!--/First slide-->
            <!--Second slide-->
            <mdb-carousel-item>
              <div class="view w-100">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).webp"
                     alt="Second slide">
                <div class="mask rgba-black-strong waves-light" mdbWavesEffect></div>
              </div>
              <div class="carousel-caption">
                <h3 class="h3-responsive">Strong mask</h3>
                <p>Secondary text</p>
              </div>
            </mdb-carousel-item>
            <!--/Second slide-->
            <!--Third slide-->
            <mdb-carousel-item>
              <div class="view w-100">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).webp"
                     alt="Third slide">
                <div class="mask rgba-black-slight waves-light" mdbWavesEffect></div>
              </div>
              <div class="carousel-caption">
                <h3 class="h3-responsive">Slight mask</h3>
                <p>Third text</p>
              </div>
            </mdb-carousel-item>
            <!--/Third slide-->
          </mdb-carousel>
          <!--/.Carousel Wrapper-->

Angular Gallery - API

In this section you will find informations about required modules of gallery component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

Show code

Pro
Free

        
            
          import { LightBoxModule, CarouselModule, ModalModule, WavesModule } from 'ng-uikit-pro-standard'

        
            
          import { LightBoxModule, CarouselModule, ModalModule, WavesModule } from 'angular-bootstrap-md'

Using Lightbox requires external library called screenfull. Install it by executing below command:

        
            npm install screenfull --save

Import example Modules list

Components

ImageModalComponent - Lightbox

Selector: mdb-imnage-modal

Type: ImageModalComponent

API Reference: LINK

CarouselComponent

Selector: mdb-carousel

Type: CarouselComponent

API Reference: LINK

SlideComponent

Selector: mdb-carousel-item

Type: SlideComponent

API Reference: LINK

Directives

ModalDirective

Selector: mdbModal

Type: ModalDirective

API Reference: LINK

Angular Bootstrap Gallery

Angular Gallery - Bootstrap 4 & Material Design

Multi-item carousel gallery MDB Pro component

Gallery with modals MDB Pro component

Video gallery

Gallery with slides and captions

This is the first title

Thir is the second title

This is the third title

Angular Gallery - API

Modules used

Components

ImageModalComponent - Lightbox

CarouselComponent

SlideComponent

Directives

ModalDirective