Usage
<header class="header-slider" data-interval="6000">
<div class="background-slider">
<div class="active" style="background-image:url(image-1.jpg)"></div>
<div style="background-image:url(image-2.jpg)"></div>
<div style="background-image:url(image-3.jpg)"></div>
</div>
<div class="container">
<h1>Header title</h1>
<h2>Lorem ipsum is simply dummy text of the printing</h2>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Headers</a></li>
<li><a href="#">Slider</a></li>
</ol>
</div>
</header>
Main settings
| Name | Type | Description |
|---|---|---|
| Full screen | CSS |
Add the class full-screen to the component to make it fullscreen. You can use the attribute data-offset="123" to adjust the header height.
|
| Interval | Attribute |
Add the attribute data-interval="123" to the component to change the interval in milliseconds between each slide. Default 3000 ms.
|
| Light color | CSS |
Add the class light to the component to convert all colors to white. Use this feature for dark backgrounds.
|
| Alignment | CSS |
Add the class align-center or align-right to the component to align in the center or align right the contents.
Try it
Align center
Align right
|
| Code location | Information | For information about the code location of this component visit the start here page. |