Template base

Background slider documentation

Examples


Installation

<link rel="stylesheet" href='../scripts/flexslider/flexslider.css'>        
<script src='../scripts/flexslider/jquery.flexslider-min.js'></script>

Usage

<body>
    <div class="background-page overlay-container">
        <div class="flexslider slider" data-options="directionNav:false,animation:fade">
            <ul class="slides">
                <li>
                    <div class="bg-cover" style="background-image:url('../../images/bg-full-1.jpg')"></div>
                </li>
                <li>
                    <div class="bg-cover" style="background-image:url('../../images/bg-full-2.jpg')"></div>
                </li>
                <li>
                    <div class="bg-cover" style="background-image:url('../../images/bg-full-3.jpg')"></div>
                </li>
            </ul>
        </div>
    </div>
    <div class="overlay-content">
        <header>
            ...
        </header>
        <div class="section-empty">
            <div class="container content">
                <div class="row">
                    ...
                </div>
            </div>
        </div>
    </div>
    <footer>
    ...
    </footer>
</body>

Main settings

Name Type Description
Settings Information Add the background-page object in first row of body and add class overlay-content to the main content container.
Slider settings Information Slider is a component of sliders page , please click here for complete documentation.
Overlay pattern HTML To add a overlay insert it into <div class="background-page"> ... </div> object, in first row.
Example
<div class="background-page overlay-container">
    <div class="bg-overlay transparent-dark"></div>
    <div class="flexslider slider" data-options="directionNav:false,animation:fade">
        <ul class="slides">
            <li>
                <div class="bg-cover" style="background-image:url('image-1.jpg')"></div>
            </li>
            <li>
                <div class="bg-cover" style="background-image:url('image-2.jpg')"></div>
            </li>
            <li>
                <div class="bg-cover" style="background-image:url('image-3.jpg')"></div>
            </li>
        </ul>
    </div>
</div>
You can also add a overlay for every single slide, just insert the overlay into the bg-cover object. Example: <li><div class="bg-cover" style="background-image:url('image-1.jpg')"><div class="bg-overlay transparent-dark"></div></div></li>.
Overlay pattern documentation

Overlay pattern is a feature of base components. Complete documentation here


Slider documentation

Slider feature is part of slider component. Complete documentation here