Chess slider
Create beautiful chess slider with the simple HTML markup:
|
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 33 34 35 36 37 |
<div class="ct-js-owl ct-chess-slider ct-sliderbuttons-bottom" data-animations="true" data-items="3" data-lgItems="2" data-mdItems="2" data-smItems="1" data-navigation="true" data-pagination="false" data-single="false"> <div class="item"> <div class="ct-u-displayTable"> <div class="ct-u-displayTableRow"> <div class="ct-u-displayTableCell"> <i class="fa fa-cog"></i> <p>Cleaning Green</p> </div> <div class="ct-u-displayTableCell"> Lorem ipsum tiouidoi lor siti amet, cosecim tetr aidip iscing etiui elita ei. </div> </div> <div class="ct-u-displayTableRow"> <div class="ct-u-displayTableCell"> <i class="fa fa-coffee"></i> <p>Carpet Cleaning</p> </div> <div class="ct-u-displayTableCell"> Lorem ipsum tiouidoi lor siti amet, cosecim tetr aidip iscing etiui elita ei. </div> </div> </div> </div> ... </div> |
You can easily change slider settings with the following CSS variations:
.ct-chess-slider – Type for chess slider. It indicates general display properties for the whole type of slider.
.ct-u-displayTableCell – Element displayed as ‘table-cell’.
.ct-u-displayTableRow – Element displayed as ‘table-row’.
.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.