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 />
              )
            }
    
            
        
    



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