eCommerce gallery

Angular Bootstrap 5 eCommerce gallery plugin

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

Note: eCommerce gallery plugin requires Multi item carousel. Make sure you have installed the Multi item carousel plugin.

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 key. Then in the img key add the path to the image with higher resolution. If the img key is omitted, the lightbox will display the same image as in the reduced size.

Show code

Activate on mouseenter

Activation on mouseenter can be enabled by adding a activation input with mouseenter value.

Show code

Zoom effect

Set zoomEffect input to enable enlarging the main image on hover.

Show code

Carousel example

Thumbnails can also be displayed as a multi carousel.

Show code

Vertical carousel

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

Show code

Different positions

Thumbnails at the top

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

Show code

Thumbnails on the right

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

Show code

Different thumbnails number

2 thumbnails

Set [items]="2" to make two thumbnails visible.

Show code

4 thumbnails

Set [items]="4" to make four thumbnails visible.

Show code

Different image sizes

Horizontal carousel

Image sizes are automatically adjusted to the view.

Show code

Vertical carousel

In a vertical carousel, it works too.

Show code

Equal image sizes

A basic example of a gallery with images of equal sizes where autoHeight input is set to true.

Show code

Related resources