This is the default markup with classes you must use if you want to create a slick slider.
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
If you want to achieve slider looking like the one on our demo page use this markup example
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="ct-slick ct-js-slick"> <div data-background="assets/images/demo-content/slider-bg.jpg" class="ct-header tablex item"> <div data-height="91%" class="ct-u-display-tablex"> <div class="inner text-uppercase"> <div class="container ct-u-color--white text-center"><span class="h4">let me bring you</span> <h1 class="h1"><span class="ct-u-color--motive">new</span>customers</h1><span class="h4">creative marketing / b2b / b2c / startup acceleration</span> </div> </div> </div> </div> ... </div> |
Screenshot
Main Slider
Slick Custom Tweaks
New Responsive data-attributes for ease of use:
- data-items-xl
- data-items-lg
- data-items-md
- data-items-sm
- data-items-xs
Slick Documentation can be found here. Files are bundled inside sella.min.js & style.css