Use the following HTML markup to insert slider:

You can modify slider settings using the following CSS classes for variations:

.ct-gallery-slider – Type for gallery slider. It indicates general display properties for the whole type of slider.

.ct-gallery,
.ct-galleryBox-icons,
.ct-js-magnificPopupImage.ct-galleryBox-overlay,
.ct-galleryBox–primary,
.ct-galleryBox-overlayIcon,

.ct-js-owl – Idicates owl-slider.

.ct-u-displayTableCell – Element displayed as ‘table-cell’.

.ct-galleryBox–type2 – Indicates gallery item properties.

.ct-galleryBox–primary – Indicates color for ‘.ct-galleryBox’ content.

.ct-u-displayTableVertical – Indicates element that acquires height 100% and every nested element in ‘display-cell’ mode is vertically aligned to ‘middle’.

.ct-sliderbuttons-top – Indicates position of buttons in the top of a slider. Buttons are placed on the far left and right side.
.ct-sliderbuttons-middle – Indicates position of buttons in the middle of a slider. Buttons are placed on the far left and right side.
.ct-sliderbuttons-bottom – Indicates position of buttons in the bottom of a slider. Buttons are placed on the far left and right side.

.ct-sliderbuttons-top2 – Parent class. Indicates position of buttons in the top of a slider.Buttons are attached to each other.
.ct-sliderbuttons-bottom2 – Parent class. Indicates position of buttons in the bottom of a slider.Buttons are attached to each other.

.ct-sliderbuttons-top2–left – Descendant class.Buttons are placed on the top-left of a slider.
.ct-sliderbuttons-top2–middle – Descendant class. Buttons are place on the top-middle of a slider.
.ct-sliderbuttons-top2–right – Descendant class. Buttons are place on the top-right of a slider.