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 activation on hover.
To ensure the proper performance of the page, it is recommended to include both thumbnails and full size photos.
import React from 'react';
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';
const basicPhotos = [
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp',
alt: 'Test alt 1',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp',
alt: 'Test alt 2',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp',
alt: 'Test alt 3',
},
];
export default function App() {
return (
<MDBEcommerceGallery imagesSrc={basicPhotos} />
)
}
Activate on mouseenter
Activation on mouseenter can be enabled by passing activation='mouseenter'
as prop.
import React from 'react';
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';
const basicPhotos = [
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp',
alt: 'Test alt 1',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp',
alt: 'Test alt 2',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp',
alt: 'Test alt 3',
},
];
export default function App() {
return (
<MDBEcommerceGallery imagesSrc={basicPhotos} activation='mouseenter' />
)
}
Zoom effect
Set enlarging the main image on hover with zoomEffect.
import React from 'react';
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';
const basicPhotos = [
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp',
alt: 'Test alt 1',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp',
alt: 'Test alt 2',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp',
alt: 'Test alt 3',
},
];
export default function App() {
return (
<MDBEcommerceGallery imagesSrc={basicPhotos} zoomEffect />
)
}
Carousel example
Thumbnails can also be displayed as a multi carousel.
It is required to import css styles in the index.js file,
just before App.js import, for the following examples to work.
for the following examples to work.
import 'mdb-react-table-editor/dist/css/table-editor.min.css';
import React from 'react';
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';
const carouselPhotos = [
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp',
alt: 'Test alt 1',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp',
alt: 'Test alt 2',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp',
alt: 'Test alt 3',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp',
alt: 'Test alt 4',
},
];
export default function App() {
return (
<MDBEcommerceGallery imagesSrc={carouselPhotos} carousel />
)
}
Vertical carousel
By passing thumbnailsPosition='left' as prop you can achieve the following
effect:
import React from 'react';
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';
const carouselPhotos = [
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp',
alt: 'Test alt 1',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp',
alt: 'Test alt 2',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp',
alt: 'Test alt 3',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp',
alt: 'Test alt 4',
},
];
export default function App() {
return (
<MDBEcommerceGallery imagesSrc={carouselPhotos} carousel thumbnailsPosition='left' />
)
}
Different positions
Thumbnails at the top
Pass thumbnailsPosition='top' to render thumbnails above main image.
import React from 'react';
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';
const carouselPhotos = [
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp',
alt: 'Test alt 1',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp',
alt: 'Test alt 2',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp',
alt: 'Test alt 3',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp',
alt: 'Test alt 4',
},
];
export default function App() {
return (
<MDBEcommerceGallery imagesSrc={carouselPhotos} carousel thumbnailsPosition='top '/>
)
}
Thumnails on the right
Pass thumbnailsPosition='right' to display thumbnails on the right.
import React from 'react';
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';
const carouselPhotos = [
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp',
alt: 'Test alt 1',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp',
alt: 'Test alt 2',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp',
alt: 'Test alt 3',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp',
alt: 'Test alt 4',
},
];
export default function App() {
return (
<MDBEcommerceGallery imagesSrc={carouselPhotos} carousel thumbnailsPosition='right' />
)
}
Different thumbnails number
2 thumbnails
Pass thumbnailsNumber={2} to make two thumbnails visible.
import React from 'react';
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';
const carouselPhotos = [
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp',
alt: 'Test alt 1',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp',
alt: 'Test alt 2',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp',
alt: 'Test alt 3',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp',
alt: 'Test alt 4',
},
];
export default function App() {
return (
<MDBEcommerceGallery imagesSrc={carouselPhotos} carousel thumbnailsNumber={2} />
)
}
4 thumbnails
Pass thumbnailsNumber={4} to make four thumbnails visible.
import React from 'react';
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';
const carouselPhotos = [
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp',
alt: 'Test alt 1',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp',
alt: 'Test alt 2',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp',
alt: 'Test alt 3',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp',
alt: 'Test alt 4',
},
];
export default function App() {
return (
<MDBEcommerceGallery imagesSrc={carouselPhotos} carousel thumbnailsNumber={2} thumbnailsPosition='left' />
)
}
Different image sizes
Horizontal carousel
Image sizes are automatically adjusted to the view.
import React from 'react';
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';
const imageSizePhotos = [
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp',
alt: 'Test alt 1',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Square/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Square/1.webp',
alt: 'Test alt 2',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp',
alt: 'Test alt 3',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Vertical/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Vertical/1.webp',
alt: 'Test alt 4',
},
];
export default function App() {
return (
<MDBEcommerceGallery imagesSrc={imageSizePhotos} carousel />
)
}
Vertical carousel
In a vertical carousel, it works too.
import React from 'react';
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';
const imageSizePhotos = [
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp',
alt: 'Test alt 1',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Square/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Square/1.webp',
alt: 'Test alt 2',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp',
alt: 'Test alt 3',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Vertical/1.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Vertical/1.webp',
alt: 'Test alt 4',
},
];
export default function App() {
return (
<MDBEcommerceGallery imagesSrc={imageSizePhotos} carousel thumbnailsPosition='left' />
)
}
Equal image sizes
A basic example of a gallery with images of equal sizes where
autoHeight prop is true.
import React from 'react';
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';
const equalSizePhotos = [
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp',
alt: 'Test alt 1',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp',
alt: 'Test alt 2',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp',
alt: 'Test alt 3',
},
{
thumbnail: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15a.webp',
src: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15a.webp',
alt: 'Test alt 4',
},
];
export default function App() {
return (
<MDBEcommerceGallery imagesSrc={equalSizePhotos} autoHeight zoomEffect />
)
}
eCommerce gallery - API
Import
import { MDBEcommerceGallery } from 'mdb-react-ecommerce-gallery';
Properties
MDBEcommerceGallery
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
activation
|
string | 'click' |
Defines image toogle mouse event. |
<MDBEcommerceGallery activation='mouseenter' />
|
activeThumbnail
|
number | 0 |
Defines default active element. |
<MDBEcommerceGallery activeThumbnail={2} />
|
autoHeight
|
boolean | false |
Set true to change active image styling to auto height. |
<MDBEcommerceGallery autoHeight />
|
carousel
|
boolean | false |
Set true to enable multi item carousel. |
<MDBEcommerceGallery carousel />
|
imagesSrc
|
{ thumbnail: string; src: string; alt: string }[] | - |
Defines an array of objects, a single object contains a full sized photo, thumbnail, and photo description. |
<MDBEcommerceGallery imageSrc={examplePhotos} />
|
thumbnailsNumber
|
number | 3 |
Defines the number of visible thumbnails in multi item carousel. |
<MDBEcommerceGallery thumbnailsNumber={2} />
|
thumbnailsPosition
|
'top' | 'bottom' | 'left' | 'right' | 'bottom' |
Specifies the position of the thumbnails in relation to the main photo. |
<MDBEcommerceGallery thumbnailsPosition='left' />
|
zoomEffect
|
boolean | false |
Set true to enlarge the main photo when hover. |
<MDBEcommerceGallery zoomEffect />
|