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 |
<div id="slick-main" data-arrows="false" data-dots="false" data-height="70%" data-draggable="false" data-fade="true" class="ct-slick ct-js-slick ct-slick--main ct-u-background--accent"> <div data-background="assets/images/demo-content/slider-bg-1.jpg" class="ct-header tablex item ct-u-mask"> <div class="container"> <div class="row"> <div class="col-sm-3 hidden-xs"> <img src="assets/images/demo-content/logo-1.png" alt=""> </div> <div class="col-sm-9 ct-u-padding-top-40"> <h1>Extreme Hardware for extreme warriors<small>we at sporta are working with passion<br><span>our hardware is made to last</span></small></h1><a href="#" class="btn btn-motive">About Us</a> <a href="#" class="btn btn-default-o">Our Services</a> </div> </div> </div> </div> <div data-background="assets/images/demo-content/slider-thumb-2.jpg" class="ct-header tablex item ct-u-mask--darker"></div> <div data-background="assets/images/demo-content/slider-thumb-3.jpg" class="ct-header tablex item ct-u-mask--darker"></div> <div data-background="assets/images/demo-content/slider-thumb-4.jpg" class="ct-header tablex item ct-u-mask--darker"></div> <div data-background="assets/images/demo-content/slider-thumb-1.jpg" class="ct-header tablex item ct-u-mask--darker"></div> </div> <div class="container ct-u-background--accent"> <div data-arrows="true" data-items-md="4" data-items-sm="3" data-items-xs="2" data-asNavFor="#slick-main" data-focusOnSelect="true" class="ct-slick ct-js-slick ct-slick--thumbs"> <div class="item"> <div class="inner"> <img src="assets/images/demo-content/slider-thumb-1.jpg" alt=""><span>1. Extreme Passion</span> </div> </div> <div class="item"> <div class="inner"> <img src="assets/images/demo-content/slider-thumb-2.jpg" alt=""><span>2. Best Weapons</span> </div> </div> <div class="item"> <div class="inner"> <img src="assets/images/demo-content/slider-thumb-3.jpg" alt=""><span>3. Strong Warriors</span> </div> </div> <div class="item"> <div class="inner"> <img src="assets/images/demo-content/slider-thumb-4.jpg" alt=""><span>4. Huge Tribe</span> </div> </div> <div class="item"> <div class="inner"> <img src="assets/images/demo-content/slider-thumb-1.jpg" alt=""><span>1. Extreme Passion</span> </div> </div> </div> </div> |
If you do not want a fixed navbar, remove class navbar-fixed
Screenshots