eCommerce gallery

Vue Bootstrap 5 eCommerce gallery plugin

Responsive eCommerce gallery built with the latest Bootstrap 5 and Vue 3. Customize with zoom effect, carousels, different positions, and much more.

Note: Read the API tab to find all available options and advanced customization

Basic example

A basic example of a gallery with the most common use case with the bootstrap grid.

Pass MDBLightbox component's ref to integrate it with the MDBECommerceGallery component. To ensure the proper performance of the page, it is recommended to include thumbnails of images in the src attribute. Then in the data-fullscreen-src attribute add the path to the image with higher resolution. If the data-fullscreen-src attribute is omitted, the lightbox will display the same image as in the reduced size.

Show code

template
script
script

TypeScript

<template>
  <MDBECommerceGallery :lightboxRef="lightbox1">
    <MDBRow>
      <MDBCol col="12" class="mb-1">
        <MDBLightbox ref="lightbox1">
          <MDBLightboxItem
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
            fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
            alt="Gallery image 1"
            class="ecommerce-gallery-main-img active w-100"
          />
        </MDBLightbox>
      </MDBCol>
      <MDBCol col="4" class="my-1">
        <img
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
          alt="Table full of spices"
          class="active w-100"
        />
      </MDBCol>
      <MDBCol col="4" class="my-1">
        <img
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
          alt="Winter Landscape"
          class="w-100"
        />
      </MDBCol>
      <MDBCol col="4" class="my-1">
        <img
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
          alt="View of the City in the Mountains"
          class="w-100"
        />
      </MDBCol>
    </MDBRow>
  </MDBECommerceGallery>
</template>

<script>
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { ref } from "vue";
  export default {
    components: {
      MDBRow,
      MDBCol,
      MDBLightbox,
      MDBLightboxItem,
      MDBECommerceGallery
    },
    setup() {
      const lightbox1 = ref(null)
      return {
        lightbox1
      };
    }
  };
</script>

<script setup lang="ts">
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { ref } from "vue";

  const lightbox1 = ref()
</script>

Activate on mouseenter

Activation on mouseenter can be enabled by adding a activation="mouseenter" property.

Show code

template
script
script

TypeScript

<template>
  <MDBECommerceGallery :lightboxRef="lightbox3" activation="mouseenter">
    <MDBRow>
      <MDBCol col="12" class="mb-1">
        <MDBLightbox ref="lightbox3">
          <MDBLightboxItem
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
            fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
            alt="Gallery image 1"
            class="ecommerce-gallery-main-img active w-100"
          />
        </MDBLightbox>
      </MDBCol>
      <MDBCol col="4" class="my-1">
        <img
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
          alt="Table full of spices"
          class="active w-100"
        />
      </MDBCol>
      <MDBCol col="4" class="my-1">
        <img
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
          alt="Winter Landscape"
          class="w-100"
        />
      </MDBCol>
      <MDBCol col="4" class="my-1">
        <img
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
          alt="View of the City in the Mountains"
          class="w-100"
        />
      </MDBCol>
    </MDBRow>
  </MDBECommerceGallery>
</template>

<script>
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { ref } from "vue";
  export default {
    components: {
      MDBRow,
      MDBCol,
      MDBLightbox,
      MDBLightboxItem,
      MDBECommerceGallery
    },
    setup() {
      const lightbox3 = ref(null)
      return {
        lightbox3
      };
    }
  };
</script>

<script setup lang="ts">
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { ref } from "vue";

  const lightbox3 = ref()
</script>

Zoom effect

Add zoomEffect property to enable enlarging the main image on hover.

Show code

template
script
script

TypeScript

<template>
  <MDBECommerceGallery :lightboxRef="lightbox3" zoomEffect>
    <MDBRow>
      <MDBCol col="12" class="mb-1">
        <MDBLightbox ref="lightbox3">
          <MDBLightboxItem
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
            fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
            alt="Gallery image 1"
            class="ecommerce-gallery-main-img active w-100"
          />
        </MDBLightbox>
      </MDBCol>
      <MDBCol col="4" class="my-1">
        <img
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
          alt="Table full of spices"
          class="active w-100"
        />
      </MDBCol>
      <MDBCol col="4" class="my-1">
        <img
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
          alt="Winter Landscape"
          class="w-100"
        />
      </MDBCol>
      <MDBCol col="4" class="my-1">
        <img
          src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
          data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
          alt="View of the City in the Mountains"
          class="w-100"
        />
      </MDBCol>
    </MDBRow>
  </MDBECommerceGallery>
</template>

<script>
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { ref } from "vue";
  export default {
    components: {
      MDBRow,
      MDBCol,
      MDBLightbox,
      MDBLightboxItem,
      MDBECommerceGallery
    },
    setup() {
      const lightbox3 = ref()
      return {
        lightbox3
      };
    }
  };
</script>

<script setup lang="ts">
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { ref } from "vue";

  const lightbox3 = ref(null)
</script>

Carousel example

Thumbnails can also be displayed as a multi carousel.

It is required to add the Multiple item carousel plugin and pass it's ref to the MDBECommerceGallery for the following examples to work.

Show code

template
script
script

TypeScript

<template>
  <MDBECommerceGallery
    :lightboxRef="lightbox4"
    :carouselRef="carousel1"
  >
    <MDBLightbox ref="lightbox4" class="mb-1">
      <MDBLightboxItem
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
        fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
        alt="Gallery image 1"
        class="ecommerce-gallery-main-img active w-100"
      />
    </MDBLightbox>
    <MDBMultiCarousel :items="3" ref="carousel1">
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
        alt="Gallery image 1"
        class="active w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
        alt="Gallery image 2"
        class="w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
        alt="Gallery image 3"
        class="w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
        alt="Gallery image 4"
        class="w-100"
      />
    </MDBMultiCarousel>
  </MDBECommerceGallery>
</template>

<script>
  import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";
  export default {
    components: {
      MDBLightbox,
      MDBLightboxItem,
      MDBECommerceGallery,
      MDBMultiCarousel
    },
    setup() {
      const lightbox4 = ref(null)
      const carousel1 = ref(null)
      return {
        lightbox4,
        carousel1
      };
    }
  };
</script>

<script setup lang="ts">
  import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";

  const lightbox4 = ref()
  const carousel1 = ref()
</script>

Vertical carousel

By adding the vertical property to the gallery and carousel you can achieve the following effect:

Show code

template
script
script

TypeScript

<template>
  <MDBECommerceGallery
    :lightboxRef="lightbox5"
    :carouselRef="carousel2"
    vertical
  >
    <MDBRow>
      <MDBCol col="4" sm="3">
        <MDBMultiCarousel vertical :items="3" ref="carousel2">
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
            alt="Gallery image 1"
            class="active w-100"
          />
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
            alt="Gallery image 2"
            class="w-100"
          />
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
            alt="Gallery image 3"
            class="w-100"
          />
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
            alt="Gallery image 4"
            class="w-100"
          />
        </MDBMultiCarousel>
      </MDBCol>
      <MDBCol col="8" sm="9">
        <MDBLightbox ref="lightbox5" class="mb-1">
          <MDBLightboxItem
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
            fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
            alt="Gallery image 1"
            class="ecommerce-gallery-main-img active w-100"
          />
        </MDBLightbox>
      </MDBCol>
    </MDBRow>
  </MDBECommerceGallery>
</template>

<script>
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";
  export default {
    components: {
      MDBRow,
      MDBCol,
      MDBLightbox,
      MDBLightboxItem,
      MDBECommerceGallery,
      MDBMultiCarousel
    },
    setup() {
      const lightbox5 = ref(null)
      const carousel2 = ref(null)
      return {
        lightbox5,
        carousel2
      }
    }
  };
</script>

<script setup lang="ts">
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";

  const lightbox5 = ref()
  const carousel2 = ref()
</script>

Different positions

Thumnails at the top

Easily add a carousel before the main image to view thumbnails above it.

Show code

template
script
script

TypeScript

<template>
  <MDBECommerceGallery
    :lightboxRef="lightbox6"
    :carouselRef="carousel3"
  >
    <MDBMultiCarousel :items="3" ref="carousel3">
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
        alt="Gallery image 1"
        class="active w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
        alt="Gallery image 2"
        class="w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
        alt="Gallery image 3"
        class="w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
        alt="Gallery image 4"
        class="w-100"
      />
    </MDBMultiCarousel>
    <MDBLightbox ref="lightbox6" class="mt-1">
      <MDBLightboxItem
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
        fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
        alt="Gallery image 1"
        class="ecommerce-gallery-main-img active w-100"
      />
    </MDBLightbox>
  </MDBECommerceGallery>
</template>

<script>
  import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";
  export default {
    components: {
      MDBLightbox,
      MDBLightboxItem,
      MDBECommerceGallery,
      MDBMultiCarousel
    },
    setup() {
      const lightbox6 = ref(null)
      const carousel3 = ref(null)
      return {
        lightbox6,
        carousel3
      }
    }
  };
</script>

<script setup lang="ts">
  import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";

  const lightbox6 = ref()
  const carousel3 = ref()
</script>

Thumnails on the right

Add the carousel in the second column to display thumbnails on the right.

Show code

template
script
script

TypeScript

<template>
  <MDBECommerceGallery
    :lightboxRef="lightbox7"
    :carouselRef="carousel4"
    vertical
  >
    <MDBRow>
      <MDBCol col="8" sm="9">
        <MDBLightbox ref="lightbox7" class="mb-1">
          <MDBLightboxItem
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
            fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
            alt="Gallery image 1"
            class="ecommerce-gallery-main-img active w-100"
          />
        </MDBLightbox>
      </MDBCol>
      <MDBCol col="4" sm="3">
        <MDBMultiCarousel vertical :items="3" ref="carousel4">
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
            alt="Gallery image 1"
            class="active w-100"
          />
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
            alt="Gallery image 2"
            class="w-100"
          />
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
            alt="Gallery image 3"
            class="w-100"
          />
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
            alt="Gallery image 4"
            class="w-100"
          />
        </MDBMultiCarousel>
      </MDBCol>
    </MDBRow>
  </MDBECommerceGallery>
</template>

<script>
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";
  export default {
    components: {
      MDBRow,
      MDBCol,
      MDBLightbox,
      MDBLightboxItem,
      MDBECommerceGallery,
      MDBMultiCarousel
    },
    setup() {
      const lightbox7 = ref(null)
      const carousel4 = ref(null)
      return {
        lightbox7,
        carousel4
      }
    }
  };
</script>

<script setup lang="ts">
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";

  const lightbox7 = ref()
  const carousel4 = ref()
</script>

Different thumbnails number

2 thumbnails

Set :items="2" on the carousel to make two thumbnails visible.

Show code

template
script
script

TypeScript

<template>
  <MDBECommerceGallery
    :lightboxRef="lightbox8"
    :carouselRef="carousel5"
  >
    <MDBMultiCarousel :items="2" ref="carousel5">
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
        alt="Gallery image 1"
        class="active w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
        alt="Gallery image 2"
        class="w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
        alt="Gallery image 3"
        class="w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
        alt="Gallery image 4"
        class="w-100"
      />
    </MDBMultiCarousel>
    <MDBLightbox ref="lightbox8" class="mb-1">
      <MDBLightboxItem
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
        fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
        alt="Gallery image 1"
        class="ecommerce-gallery-main-img active w-100"
      />
    </MDBLightbox>
  </MDBECommerceGallery>
</template>

<script>
  import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";
  export default {
    components: {
      MDBLightbox,
      MDBLightboxItem,
      MDBECommerceGallery,
      MDBMultiCarousel
    },
    setup() {
      const lightbox8 = ref(null)
      const carousel5 = ref(null)
      return {
        lightbox8,
        carousel5
      }
    }
  };
</script>

<script setup lang="ts">
  import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";

  const lightbox8 = ref()
  const carousel5 = ref()
</script>

4 thumbnails

Set :items="4" on the carousel to make four thumbnails visible.

Show code

template
script
script

TypeScript

<template>
  <MDBECommerceGallery
    :lightboxRef="lightbox9"
    :carouselRef="carousel6"
    vertical
  >
    <MDBRow>
      <MDBCol col="8" sm="9">
        <MDBLightbox ref="lightbox9" class="mb-1">
          <MDBLightboxItem
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
            fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
            alt="Gallery image 1"
            class="ecommerce-gallery-main-img active w-100"
          />
        </MDBLightbox>
      </MDBCol>
      <MDBCol col="4" sm="3">
        <MDBMultiCarousel vertical :items="4" ref="carousel6">
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
            alt="Gallery image 1"
            class="active w-100"
          />
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/2.webp"
            alt="Gallery image 2"
            class="w-100"
          />
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/3.webp"
            alt="Gallery image 3"
            class="w-100"
          />
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
            alt="Gallery image 4"
            class="w-100"
          />
        </MDBMultiCarousel>
      </MDBCol>
    </MDBRow>
  </MDBECommerceGallery>
</template>

<script>
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";
  export default {
    components: {
      MDBRow,
      MDBCol,
      MDBLightbox,
      MDBLightboxItem,
      MDBECommerceGallery,
      MDBMultiCarousel
    },
    setup() {
      const lightbox9 = ref(null)
      const carousel6 = ref(null)
      return {
        lightbox9,
        carousel6
      }
    }
  };
</script>

<script setup lang="ts">
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";

  const lightbox9 = ref()
  const carousel6 = ref()
</script>

Different image sizes

Horizontal carousel

Image sizes are automatically adjusted to the view.

Show code

template
script
script

TypeScript

<template>
  <MDBECommerceGallery
    :lightboxRef="lightbox10"
    :carouselRef="carousel7"
  >
    <MDBLightbox ref="lightbox10" class="mb-1">
      <MDBLightboxItem
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
        fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
        alt="Gallery image 1"
        class="ecommerce-gallery-main-img active w-100"
      />
    </MDBLightbox>
    <MDBMultiCarousel :items="3" ref="carousel7">
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
        alt="Gallery image 1"
        class="active w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Square/1.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Square/1.webp"
        alt="Gallery image 2"
        class="w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
        alt="Gallery image 3"
        class="w-100"
      />
      <img
        src="https://mdbootstrap.com/img/Photos/Thumbnails/Vertical/1.webp"
        data-fullscreen-src="https://mdbootstrap.com/img/Photos/Vertical/1.webp"
        alt="Gallery image 4"
        class="w-100"
      />
    </MDBMultiCarousel>
  </MDBECommerceGallery>
</template>

<script>
  import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";
  export default {
    components: {
      MDBLightbox,
      MDBLightboxItem,
      MDBECommerceGallery,
      MDBMultiCarousel
    },
    setup() {
      const lightbox10 = ref(null)
      const carousel7 = ref(null)
      return {
        lightbox10,
        carousel7
      }
    }
  };
</script>

<script setup lang="ts">
  import { MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";

  const lightbox10 = ref()
  const carousel7 = ref()
</script>

Vertical carousel

In a vertical carousel, it works too.

Show code

template
script
script

TypeScript

<template>
  <MDBECommerceGallery
    :lightboxRef="lightbox11"
    :carouselRef="carousel8"
    vertical
  >
    <MDBRow>
      <MDBCol col="4" sm="3">
        <MDBMultiCarousel vertical :items="3" ref="carousel8">
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/1.webp"
            alt="Gallery image 1"
            class="active w-100"
          />
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Square/1.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Square/1.webp"
            alt="Gallery image 2"
            class="w-100"
          />
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Slides/4.webp"
            alt="Gallery image 3"
            class="w-100"
          />
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Vertical/1.webp"
            data-fullscreen-src="https://mdbootstrap.com/img/Photos/Vertical/1.webp"
            alt="Gallery image 4"
            class="w-100"
          />
        </MDBMultiCarousel>
      </MDBCol>
      <MDBCol col="8" sm="9">
        <MDBLightbox ref="lightbox11" class="mb-1">
          <MDBLightboxItem
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
            fullScreenSrc="https://mdbootstrap.com/img/Photos/Slides/1.webp"
            alt="Gallery image 1"
            class="ecommerce-gallery-main-img active w-100"
          />
        </MDBLightbox>
      </MDBCol>
    </MDBRow>
  </MDBECommerceGallery>
</template>

<script>
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";
  export default {
    components: {
      MDBRow,
      MDBCol,
      MDBLightbox,
      MDBLightboxItem,
      MDBECommerceGallery,
      MDBMultiCarousel
    },
    setup() {
      const lightbox11 = ref(null)
      const carousel8 = ref(null)
      return {
        lightbox11,
        carousel8
      }
    }
  };
</script>

<script setup lang="ts">
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { MDBMultiCarousel } from "mdb-vue-multi-carousel";
  import { ref } from "vue";

  const lightbox11 = ref()
  const carousel8 = ref()
</script>

Equal image sizes

A basic example of a gallery with images of equal sizes where autoHeight property is added.

Show code

template
script
script

TypeScript

<template>
  <MDBRow>
    <MDBCol col="6">
      <MDBECommerceGallery
        :lightboxRef="lightbox12"
        zoomEffect
        autoHeight
      >
        <MDBRow class="py-3 shadow-5">
          <MDBCol col="12" class="mb-1">
            <MDBLightbox ref="lightbox12">
              <MDBLightboxItem
                src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
                alt="Gallery image 1"
                class="ecommerce-gallery-main-img active w-100"
              />
            </MDBLightbox>
          </MDBCol>
          <MDBCol class="mt-1">
            <img
              src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
              data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
              alt="Gallery image 1"
              class="active w-100"
            />
          </MDBCol>
          <MDBCol class="mt-1">
            <img
              src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
              data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
              alt="Gallery image 2"
              class="w-100"
            />
          </MDBCol>
          <MDBCol class="mt-1">
            <img
              src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
              data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
              alt="Gallery image 3"
              class="w-100"
            />
          </MDBCol>
          <MDBCol class="mt-1">
            <img
              src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
              data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
              alt="Gallery image 4"
              class="w-100"
            />
          </MDBCol>
        </MDBRow>
      </MDBECommerceGallery>
    </MDBCol>
  </MDBRow>
</template>

<script>
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { ref } from "vue";
  export default {
    components: {
      MDBRow,
      MDBCol,
      MDBLightbox,
      MDBLightboxItem,
      MDBECommerceGallery
    },
    setup() {
      const lightbox12 = ref(null)
      return {
        lightbox12
      }
    }
  };
</script>

<script setup lang="ts">
  import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit";
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
  import { ref } from "vue";

  const lightbox12 = ref()
</script>

eCommerce gallery - API

Import

Show code

script

<script>
  import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery";
</script>

Properties

Name	Type	Default	Description
`activation`	String	`'click`	Defines image toggle mouse event.
`autoHeight`	Boolean	`false`	Changes active image styling to auto height.
`carouselRef`	Object	`-`	Defines MultiCarousel component ref element
`lightboxRef`	Object	`-`	Defines Lightbox component ref element
`tag`	String	`'div'`	Defines component wrapper tag
`vertical`	Boolean	`false`	Enables vertical styles for component
`zoomEffect`	Boolean	`false`	Hovering over the image enlarges it in the given place.

eCommerce gallery

Vue Bootstrap 5 eCommerce gallery plugin

Basic example

Activate on mouseenter

Zoom effect

Carousel example

Vertical carousel

Different positions

Thumnails at the top

Thumnails on the right

Different thumbnails number

2 thumbnails

4 thumbnails

Different image sizes

Horizontal carousel

Vertical carousel

Equal image sizes

Related resources

eCommerce gallery - API

Import

Properties