Image slider title

Lorem Ipsum is simply dummy text of the printing

Variants

Slider Full screen Full screen parallax Parallax

Installation

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

Usage

<div class="header-slider header-parallax full-screen-title white">
    <div class="layer-parallax">
        <div class="flexslider slider" data-options="directionNav:false,animation:fade,slideshowSpeed:5000">
            <ul class="slides">
                <li>
                    <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-wide.png')">
                        <div class="bg-overlay line-45"></div>
                    </div>
                </li>
                <li>
                    <div class="bg-cover" style="background-image:url(http://www.framework-y.com/images/thumb-wide.png')">
                        <div class="bg-overlay line-45"></div>
                    </div>
                </li>
                <li>
                    <div class="bg-cover" style="background-image:url('http://www.framework-y.com/images/thumb-wide.png')">
                        <div class="bg-overlay line-45"></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="overlaybox">
        <div class="container">
            <div class="title-base">
                <hr class="anima" />
                <h1>TITLE COMPONENT / FULLSCREEN PARALLAX IMAGES SLIDER</h1>
                <p>Lorem Ipsum is simply dummy text of the printing.</p>
            </div>
        </div>
    </div>
</div>

Main settings

Name Type Description
White CSS Add class white to the container object to convert all colors to white. Use this feature for dark backgrounds.
Overlay pattern Mixed Add the code <div class="bg-overlay dotted"></div> into the title, as first row.
Overlay pattern is a feature of Javascript and CSS, complete documentation and patterns list here
Code location Information Insert the title code just belove header code. Example: 
<body>
    <header> 
        ... 
    </header>
    <div class="header-slider header-parallax full-screen-title">
        ...
    </div>
    <div class="section-empty">
        <div class="container content">
            ...
        </div>
    </div>
    <footer>
           ...
    </footer>
</body>