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.

Carousel Gallery

Carousel gallery modules which can be set in different styles

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.