Aleksanderj,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/jquery.flexslider-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style type='text/css'>
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html, main {
background:#fff;
height: 100%;
font-size: 12px;
font-weight: 300;
line-height: 26px;
}
.background-sky, .background-night {
background-color: #07a8dd;
display: block;
font-size: 16px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
height: 520px;
}
.background-night {
background-color: #59CB59;
}
.slides li li{
margin-left : -140%;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$('.slides li li').animate({
'margin-left': '0%'
}, 800)
$('.flexslider').flexslider({
animation: "fade",
directionNav: false,
controlNav: false,
slideshowSpeed: 7000,
animationSpeed: 600,
before: function() {
$('.slides li li').css({
'margin-left': '-140%'
})
},
after: function() {
$('li.flex-active-slide li').animate({
'margin-left': '0%'
}, 800)
}
});
});
</script>
</head>
<body>
<div class="featured-work-slider flexslider">
<ul class="slides">
<li>
<div class="background-sky">
<h1 class="hero-title1">1 слайд</h1>
<ul class="animate-block">
<li>
Анимированный блок 1
</li>
</ul>
</div>
</li>
<li>
<div class="background-night">
<h1 class="hero-title2">2 слайд</h1>
<ul class="animate-block2">
<li>
Анимированный блок 2
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>