eCommerce gallery
Bootstrap 5 eCommerce gallery plugin
Responsive eCommerce gallery built with the latest Bootstrap 5. 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 and activation on hover.
To ensure the proper performance of the page, it is recommended to include thumbnails of
images in the src attribute. Then in the
data-mdb-img attribute add the path to the image with higher resolution. If the
data-mdb-img attribute is omitted, the lightbox will display the same image as in
the reduced size.
<div class="ecommerce-gallery">
<div class="row">
<div class="col-12 mb-1">
<div class="lightbox">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table Full of Spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
<div class="col-4 my-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="col-4 my-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="col-4 my-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
</div>
</div>
Activate on mouseenter
Activation on mouseenter can be enabled by adding a
data-mdb-activation attribute with mouseenter value.
<div class="ecommerce-gallery" data-mdb-activation="mouseenter">
<div class="row">
<div class="col-12 mb-1">
<div class="lightbox">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
<div class="col-4 my-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="col-4 my-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="col-4 my-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
</div>
</div>
Zoom effect
Set data-mdb-zoom-effect to true to enable enlarging the main image on hover.
<div class="ecommerce-gallery" data-mdb-zoom-effect="true">
<div class="row">
<div class="col-12 mb-1">
<div class="lightbox">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
<div class="col-4 my-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="col-4 my-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="col-4 my-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
</div>
</div>
Carousel example
Thumbnails can also be displayed as a multi carousel.
It is required to add the Multiple item carousel plugin for the following examples to work.
<div class="ecommerce-gallery">
<div class="lightbox mb-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
<div class="multi-carousel" data-mdb-breakpoint="false" data-mdb-items="3">
<div class="multi-carousel-inner">
<div class="multi-carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
</div>
<button
class="carousel-control-prev"
tabindex="0"
type="button"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button
class="carousel-control-next"
tabindex="0"
type="button"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</div>
Vertical carousel
By adding the vertical class to the gallery and carousel you can achieve the
following effect:
<div class="ecommerce-gallery vertical">
<div class="row">
<div class="col-4 col-sm-3">
<div class="multi-carousel vertical" data-mdb-items="3">
<div class="multi-carousel-inner">
<div class="multi-carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
</div>
<button
class="carousel-control-prev"
tabindex="0"
type="button"
data-mdb-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
</button>
<button
class="carousel-control-next"
tabindex="0"
type="button"
data-mdb-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
</button>
</div>
</div>
<div class="col-8 col-sm-9">
<div class="lightbox">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
</div>
</div>
Different positions
Thumbnails at the top
Easily add a carousel before the main image to view thumbnails above it.
<div class="ecommerce-gallery">
<div class="multi-carousel" data-mdb-breakpoint="false" data-mdb-items="3">
<div class="multi-carousel-inner">
<div class="multi-carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
</div>
<button
class="carousel-control-prev"
tabindex="0"
type="button"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button
class="carousel-control-next"
tabindex="0"
type="button"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
<div class="lightbox mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
Thumnails on the right
Add the carousel in the second column to display thumbnails on the right.
<div class="ecommerce-gallery vertical">
<div class="row">
<div class="col-8 col-sm-9">
<div class="lightbox">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
<div class="col-4 col-sm-3">
<div class="multi-carousel vertical" data-mdb-items="3">
<div class="multi-carousel-inner">
<div class="multi-carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
</div>
<button
class="carousel-control-prev"
tabindex="0"
type="button"
data-mdb-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
</button>
<button
class="carousel-control-next"
tabindex="0"
type="button"
data-mdb-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
</button>
</div>
</div>
</div>
</div>
Different thumbnails number
2 thumbnails
Set data-mdb-items="2" to make two thumbnails visible.
<div class="ecommerce-gallery">
<div class="multi-carousel" data-mdb-breakpoint="false" data-mdb-items="2">
<div class="multi-carousel-inner">
<div class="multi-carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
</div>
<button
class="carousel-control-prev"
tabindex="0"
type="button"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button
class="carousel-control-next"
tabindex="0"
type="button"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
<div class="lightbox mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
4 thumbnails
Set data-mdb-items="4" to make four thumbnails visible.
<div class="ecommerce-gallery vertical">
<div class="row">
<div class="col-8 col-sm-9">
<div class="lightbox">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
<div class="col-4 col-sm-3">
<div class="multi-carousel vertical" data-mdb-items="4">
<div class="multi-carousel-inner">
<div class="multi-carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
</div>
<button
class="carousel-control-prev"
tabindex="0"
type="button"
data-mdb-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
</button>
<button
class="carousel-control-next"
tabindex="0"
type="button"
data-mdb-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
</button>
</div>
</div>
</div>
</div>
Different image sizes
Horizontal carousel
Image sizes are automatically adjusted to the view.
<div class="ecommerce-gallery">
<div class="lightbox mb-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
<div class="multi-carousel" data-mdb-breakpoint="false" data-mdb-items="3">
<div class="multi-carousel-inner">
<div class="multi-carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Square/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Square/1.webp"
alt="Coconut with Strawberries"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Vertical/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Vertical/1.webp"
alt="Dark Roast Iced Coffee"
class="w-100"
/>
</div>
</div>
<button
class="carousel-control-prev"
tabindex="0"
type="button"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button
class="carousel-control-next"
tabindex="0"
type="button"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</div>
Vertical carousel
In a vertical carousel, it works too.
<div class="ecommerce-gallery vertical">
<div class="row">
<div class="col-4 col-sm-3">
<div class="multi-carousel vertical" data-mdb-items="3">
<div class="multi-carousel-inner">
<div class="multi-carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Square/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Square/1.webp"
alt="Coconut with Strawberries"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Vertical/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Vertical/1.webp"
alt="Dark Roast Iced Coffee"
class="w-100"
/>
</div>
</div>
<button
class="carousel-control-prev"
tabindex="0"
type="button"
data-mdb-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
</button>
<button
class="carousel-control-next"
tabindex="0"
type="button"
data-mdb-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
</button>
</div>
</div>
<div class="col-8 col-sm-9">
<div class="lightbox">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
</div>
</div>
Equal image sizes
A basic example of a gallery with images of equal sizes where
data-mdb-auto-height attribute is set to true.
<div class="ecommerce-gallery" data-mdb-zoom-effect="true" data-mdb-auto-height="true">
<div class="row py-3 shadow-5">
<div class="col-12 mb-1">
<div class="lightbox">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
alt="White blouse"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
alt="White blouse"
class="active w-100"
/>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
alt="Blue Jeans Jacket"
class="w-100"
/>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
alt="Red Sweatshirt"
class="w-100"
/>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
alt="Black Shirt"
class="w-100"
/>
</div>
</div>
</div>
eCommerce gallery - API
Usage
Via data attributes
<div class="ecommerce-gallery" data-mdb-activation="mouseenter">
<!-- content -->
</div>
Via JavaScript
const gallery = document.getElementById('gallery');
const instance = EcommerceGallery.getInstance(gallery);
instance.dispose();
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$('#gallery').ecommerceGallery('dispose');
Options
| Name | Type | Default | Description |
|---|---|---|---|
activation
|
String | 'click' |
Defines image toggle mouse event. |
autoHeight
|
Boolean | false |
Changes active image styling to auto height. |
zoomEffect
|
Boolean | false |
Hovering over the image enlarges it in the given place. |
Methods
| Name | Parameters | Description | Example |
|---|---|---|---|
init |
Initializes EcommerceGallery. | instance.init() |
|
dispose
|
Removes the EcommerceGallery instance. |
instance.dispose()
|
|
getInstance
|
element | Static method which allows to get the gallery instance associated with a DOM element. |
EcommerceGallery.getInstance(element)
|
const gallery = document.getElementById('gallery');
const instance = EcommerceGallery.getInstance(gallery);
instance.dispose();
Import
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import EcommerceGallery from 'mdb-ecommerce-gallery';