Flexslider without Jumping onload

by NOVUSIDEA

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.0/flexslider-min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.0/jquery.flexslider-min.js"></script>
<div class="flexslider">
    <img class="flex-expand" src="http://s7.directupload.net/images/140130/uxp3hfpf.png" />
    <ul class="slides">
        <li><img src="http://lorempixel.com/800/450/nature/1/" /></li>
        <li><img src="http://lorempixel.com/800/450/nature/2/" /></li>
        <li><img src="http://lorempixel.com/800/450/nature/3/" /></li>
        <li><img src="http://lorempixel.com/800/450/nature/4/" /></li>
    </ul>
</div>

CSS

.flex-expand {
    display: block;
    height: auto;
    width: 100%;
}
.flexslider .slides {
   position: absolute;
    top: 0;
}

JavaScript

$('.flexslider').flexslider({
    animation: 'fade'
});