Create a 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 38 39 40 |
<div class="ct-worksample"> <div class="col-lg-3"> <div class="ct-worksample-sidebar"> <h3 class="ct-u-hrLeft">Sampels of my work</h3> <p> Our values are knowledge, professionalism, safety, and efficiency. Our goal is to not only help you build and/or repair your home, but to make the process very easy and affordable for you. We are a company with a wide range of experience. </p> <a class="btn btn-lg btn-transparent" href="#">View Project <i class="fa fa-location-arrow"></i> </a> </div> </div> <div class="col-lg-9"> <div class="ct-js-owl ct-worksample-slider" data-animations="true" data-items="3" data-navigation="true" data-pagination="false" data-single="false" data-lgItems="3"> <!------------------------------------------------------------------------------------------------------------------------> <div class="item"> <img src="../assets/images/cleaning/worksample-slider/OwlTwoWomenCleaningCarpet.png"> <div class="ct-u-displayTable"> <h5 class=" ct-u-marginBottom50">Water, drain and gas systems (repipes)</h5> <a class="btn btn-lg btn-transparent" href="#">View Project <i class="fa fa-location-arrow"></i> </a> </div> </div> ... </div> </div> </div> |
You can select between two variations:
.ct-worksample-sidebar,
.ct-worksample-slider.