— Basic slider markup
HTML markup
|
1 2 3 4 5 |
<div class="ct-slick ct-js-slick"> <div class="item">...</div> ... <div class="item">...</div> </div> |
–Main Slider
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<div class="ct-slick ct-js-slick"> <div class="ct-slick ct-js-slick ct-mainSlider ct-slick-arrow--type1 ct-slick-dots--type1" data-autoplay="false" data-arrows="true" data-dots="true" data-items="1" data-height="550"> <div class="item" data-background="assets/images/background-1.jpg" data-height="550"> <div class="item-inner container"> <div class="row"> <div class="col-lg-5 col-md-6 col-sm-8 col-xs-10 slider-header"> <h1 class="ct-fw-700">We’ll have you up and running in no time</h1> </div> </div> <div class="row"> <div class="col-lg-5 col-md-6 ct-u-marginTop10"> <a href="about-us.html" class="btn btn-white btn-slider--motive">Learn how</a> <span>or</span> <a href="appointments.html" class="btn btn-white">Make appointment</a> </div> </div> </div> </div> <div class="item" data-background="assets/images/background-1.jpg "> <div class="item-inner container"> <div class="row"> <div class="col-lg-5 col-md-6 col-sm-8 col-xs-10 slider-header"> <h1 class="ct-fw-700">We’ll have you up and running in no time</h1> </div> </div> <div class="row"> <div class="col-lg-5 col-md-6 ct-u-marginTop10"> <a href="about-us.html" class="btn btn-white btn-slider--motive">Learn how</a> <span>or</span> <a href="appointments.html" class="btn btn-white">Make appointment</a> </div> </div> </div> </div> <div class="item" data-background="assets/images/background-1.jpg"> <div class="item-inner container"> <div class="row"> <div class="col-lg-5 col-md-6 col-sm-8 col-xs-10 slider-header"> <h1 class="ct-fw-700">We’ll have you up and running in no time</h1> </div> </div> <div class="row"> <div class="col-lg-5 col-md-6 ct-u-marginTop10"> <a href="about-us.html" class="btn btn-white btn-slider--motive">Learn how</a> <span>or</span> <a href="appointments.html" class="btn btn-white">Make appointment</a> </div> </div> </div> </div> </div> ... </div> |
Screenshot
Main slider
Slick Documentation can be found here Files are bundled inside style.css and main.js