There are two types of sliders used in the {Theme}
- Main Slider
- Slick Custom Tweaks
— Main Slider
HTML markup
1 2 3 4 5 |
<div class="ct-slick ct-js-slick"> <div class="item">...</div> ... <div class="item">...</div> </div> |
Screenshot
–Slick Custom Tweaks
HTML markup
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="ct-slick ct-js-slick"> <div data-background="assets/images/demo-content/slider-01.jpg" class="item"> <div class="ct-slick__footer"> <div class="inner"> <h3>Garden Tea Time In The Backyard</h3> <div role="separator" class="divider"></div><span>And to top it all of, your princess and her court will enjoy a tea party at a table fit for a queen!</span> </div> <div class="inner"><a href="#" class="btn btn-default-o">See Gallery</a> </div> </div> </div> ... </div> |
Screenshot
New Responsive data-atributes 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 confetti.min.js & style.css