TITLE COMPONENT / FULLSCREEN PARALLAX IMAGES SLIDER

Lorem Ipsum is simply dummy text of the printing.

Installation

<link rel="stylesheet" href='../scripts/flexslider/flexslider.css'>        
<script src='../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
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>

Title slider documentation

Title slider fullscreen is part of title slider component. Complete documentation here

Slider documentation

Slider feature is part of slider component. Complete documentation here