Navbar
Comet includes two styles for the primary navbar, light and dark. If you want to use the dark version, you just need to add the class .dark to the #topnav header tag.
Sliders
To setup a slider, you just need to create a .flexslider div and pass the options in the data-options attribute, like this:
<div data-options="{"animation": "slide", "controlNav": true, "directionNav": true}" class="flexslider nav-inside">
<ul class="slides">
<li><img src="images/portfolio/single-1.jpg" alt=""></li>
<li><img src="images/portfolio/single-2.jpg" alt=""></li>
<li><img src="images/portfolio/single-3.jpg" alt=""></li>
</ul>
</div>
Available options:
| Property |
Description |
animation |
Controls the animation type, "fade" or "slide". |
controlNav |
Create navigation for paging control of each slide. Boolean |
directionNav |
Create previous/next arrow navigation. Boolean |
You can use .nav-inside, .nav-outside, .control-nav-dark classes to style the controlNav.
Carousels
To setup a carousel, you just need to create a .owl-carousel div and pass the options in the data-options attribute, like this:
<div data-options="{"items": 6, "autoplay": true, "margin": 100, "smItems": 4, "xsItems": 3}" class="owl-carousel">
<div class="client"><img src="images/clients/1.png" alt=""></div>
...
</div>
Available options:
| Property |
Description |
items |
The number of items you want to see on the screen. |
loop |
Inifnity loop. Duplicate last and first items to get loop illusion. |
dots |
Show dots navigation. |
margin |
Margin-right(px) on item. |
autoplay |
Autoplay. |
xsItems |
The number of items you want to see on small screens (< 768px). |
smItems |
The number of items you want to see on tablet screens (768px - 991px). |
mdItems |
The number of items you want to see on medium screens (992px - 1199px). |
Maps
You can add a map by simply adding a #map div and pass two options: latitude and longitude. Like this:
<div id="map" data-lat="40.773328" data-lang="-73.960088" class="full-width"></div>
You can use the .full-width class if you want a full width map. If you want to place it inside a split section be sure to wrap the map div inside the .img-side
You can find your latitude and longitude here.
Anchor Links
If you want to use an anchor link to scroll smoothly to an element of the page, you just need to set the data-scroll attribute to true. Like this:
<a href="#demos" data-scroll="true" class="btn btn-light-out">Select a demo</a>