минимализм на тему слайдера, ждите загрузки фото
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body,html{
height:100%;
}
#slider>div{
position:absolute;
background-size:cover;
width:20%;
height:50%;
transition:all 1s;
text-align:center;
line-height:20em;
background-color: rgba(51, 102, 0, 1);
}
#slider>div span{
opacity:0;
font-size:72px;
color:rgba(255,255,255,1);
}
#slider{
position:relative;
overflow:hidden;
width:100%;
height:100%;
}
#slider>div:nth-child(1){
left:-20%;
top:-50%;
}
#slider>div:nth-child(2){
left:0;
top:0;
}
#slider>div:nth-child(3){
left:0%;
top:50%;
}
#slider>div:nth-child(4){
left:20%;
top:0%;
width:60%;
height:100%;
}
#slider>div:nth-child(4) span{
opacity:1;
transition:.8s 1.4s;
}
#slider>div:nth-child(5){
left:80%;
top:0%;
}
#slider>div:nth-child(6){
left:80%;
top:50%;
}
#slider>div:nth-child(7){
left:100%;
top:0%;
}
#slider>div:nth-child(6)~div{
visibility:hidden;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
(function fn()
{
$("#slider > div:nth-child(1)").appendTo("#slider");
window.setTimeout(fn,3000)
}())
});
</script>
</head>
<body>
<div id="slider">
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=1)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=2)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=3)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=4)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=5)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=6)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=7)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=8)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=9)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=10)"><span>paris</span></div>
</div>
</body>
</html>
