Header title

Lorem ipsum is simply dummy text of the printing

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.
Code location Information For information about the code location of this component visit the start here page.