shahin,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div.carusel ul li img{
width:200px;
height:340px;
}
div.carusel ul li div{
position:absolute;
bottom:0;
margin-left:120%;
text-align:center;
transition:margin-left .5s ease-in-out .3s;
background-color:transparent;
color:#000000;
}
div.carusel ul li.act div{
margin-left:45%;
}
div.carusel ul li.hide div{
margin-left:-120%;
transition-delay:margin-left 0s;
transition-duration:margin-left .3s;
}
div.carusel ul li{
position:relative;
margin:0px;
width:200px;
height:350px;
float:left;
display:block;
text-align:center;
}
div.carusel ul{
position:relative;
top:0px;
left:0px;
display:block;
width:1500px;
height:350px;
padding:0px;
margin:0px;
}
div.carusel{
overflow:hidden;
width:200px;
height:350px;
position:relative;
margin:10px auto;
border: 2px solid #8B4513;
border-radius: 12px;
}
.content{
position:relative;
}
.content div p{
opacity:0;
background-color:#8B4513;
color:#FFFFFF;
margin-left:0%;
transition:opacity .8s;
width:100%;
}
.content div:nth-child(1) p{
background-color:red;
}
.content div:nth-child(2) p{
background-color:green;
}
.content div:nth-child(3) p{
background-color:Yellow;
}
.content div:nth-child(4) p{
background-color:DeepPink;
}
.content div:nth-child(5) p{
background-color:MediumBlue;
}
.content div.act p{
opacity:1;
transition:opacity .8s;
}
.content div.hide p{
transition:margin-left .6s ease-out;
margin-left:-120%;
}
.content div p:nth-child(1){
transition-delay:.1s;
}
.content div p:nth-child(2){
transition-delay:.3s;
}
.content div p:nth-child(3){
transition-delay:.5s;
}
.content div p:nth-child(4){
transition-delay:.7s;
}
.content div p:nth-child(5){
transition-delay:.9s;
}
.content div{
width:100%;
position:absolute;
z-index:10;
overflow:hidden;
}
.content div.act{
z-index:10;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
function c() {
var b = $("li:first", a), e = b.width(), g = f.index(b), d = $(".content > div").eq(g);
b.addClass("act");
d.removeClass("hide").addClass("act");
a.delay(4500).queue(function(a) {
b.addClass("hide");
d.addClass("hide");
a();
}).delay(500).animate({left:-e}, 1200, function() {
d.removeClass("act");
b.appendTo(a).removeClass("act hide");
a.css({left:"0px"});
c();
});
}
var a = $(".carusel ul"), f = $("li", a);
c();
});
</script>
</head>
<body>
<div class="carusel">
<ul>
<li><img src="http://img-fotki.yandex.ru/get/9752/47407354.e39/0_15fd2a_6924d7e9_orig.png" alt=""><div>1</div></li>
<li><img src="http://img-fotki.yandex.ru/get/9752/47407354.e39/0_15fd2a_6924d7e9_orig.png" alt=""><div>2</div></li>
<li><img src="http://img-fotki.yandex.ru/get/9752/47407354.e39/0_15fd2a_6924d7e9_orig.png" alt=""><div>3</div></li>
<li><img src="http://img-fotki.yandex.ru/get/9752/47407354.e39/0_15fd2a_6924d7e9_orig.png" alt=""><div>4</div></li>
<li><img src="http://img-fotki.yandex.ru/get/9752/47407354.e39/0_15fd2a_6924d7e9_orig.png" alt=""><div>5</div></li>
</ul>
</div>
<div class="content">
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</div>
</body>
</html>
более не могу уделить время этому заказу, если кто-то другой доделает код, или предложит свой вариант, вопросов с моей стороны не будет.
