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.

Show code

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.

Show code

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.

Show code

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.

index.js

import 'mdb-react-table-editor/dist/css/table-editor.min.css';

Show code

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:

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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

Show code

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 />`