Slide Gallery

Slide gallery modules which can be set in different styles

The slide gallery is a Bootstrap carousel component restyled that comes with default indicators and circle indicators, also you can set the size of arrows nav with .carousel-nav-sm and .carousel-nav-lg classes as below, if you leave it blank the arrows nav will display in a medium size.

You can set the arrows nav to dark color with .carousel-nav-dark class.

Synced Gallery

Synced gallery module with various options

There are data attributes that available for Synced Gallery as below.

data-gutter="" [Thumbnail slide columns gap]
data-dots="" [Show dots navigation, true/false]
data-thumb="" [Thumbnail slide columns on extra small devices]
data-thumb-sm="" [Thumbnail slide columns on small devices]
data-thumb-md="" [Thumbnail slide columns on medium devices]
data-thumb-lg="" [Thumbnail slide columns on large devices]
data-thumb-xl="" [Thumbnail slide columns on extra large devices]

The default value of data-thumb is 3 columns, assuming if you would like to set 3 columns for extra small and small devices, 4 columns for medium devices and 7 columns for large and extra large devices, your HTML markup will look like below.


You can set the size of arrows nav with .carousel-nav-sm and .carousel-nav-lg classes as below, if you leave it blank the arrows nav will display in a medium size.


You can set the arrows nav to dark color with .carousel-nav-dark class.


Quickly Build Your Impressive Website

Bootstrap 4 multipurpose template with a lots of unique modules and useful features.