Use the following HTML markup to insert slider:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div class="ct-gallery-slider"> <div class="ct-gallery"> <div class="ct-js-owl ct-sliderbuttons-middle" data-animations="true" data-items="5" data-navigation="true" data-pagination="false" data-single="false"> <div> <div class="ct-galleryBox ct-galleryBox--type2 ct-galleryBox--primary"> <a href="../assets/images/cleaning/slider-gallery/row1/1.png" class="ct-js-magnificPopupImage"> <img src="../assets/images/cleaning/slider-gallery/row1/1.png" alt="Zappy"> </a> <div class="ct-galleryBox-overlay"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"> <div class="ct-galleryBox-icons"> <a href="../assets/images/cleaning/TwoWomenCleaningCarpetGV1.png" class="ct-js-magnificPopupImage"> <div class="ct-galleryBox-overlayIcon"> <span>Quick View</span> </div> </a> </div> </div> </div> </div> </div> </div> </div> </div> |
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.