s24344,
для медитации ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.clearfix:before, .clearfix:after{
content: " ";
display: table;
}
.clearfix:after{
clear: both;
}
body {
background-color: #d6dbcb;
}
img {
border: none;
max-width: 100%;
display: block;
margin: auto;
}
.wrap {
max-width: 959px;
margin: auto;
position: relative;
}
div.carousel-wrap {
margin: 20px auto;
max-width: 852px;
overflow: hidden;
position: relative;
}
ul.carousel {
padding: 20px 0 15px 0;
margin: 0;
list-style-type: none;
background-color: #fff;
/* width: 852px; */
left: 0;
position: relative;
width: 10650px;
}
li.carousel__title {
float: left;
position: relative;
}
div.myslide {
width: 213px;
text-align: center;
}
a.carousel__link {
display: block;
color: #be1a2a;
}
div.controls__prev {
position: absolute;
top: 0;
left: 0px;
width: 54px;
background-color: #f0f2eb;
opacity: .2;
}
div.controls__prev > a {
width: 22px;
height: 45px;
background: url(../images/prev.png) no-repeat;
display: block;
position: absolute;
top: 50%;
left: 50%;
}
div.controls__next {
position: absolute;
top: 0;
right: 0px;
width: 54px;
background-color: #f0f2eb;
}
div.controls__next > a {
width: 22px;
height: 45px;
background: url(../images/next.png) no-repeat;
display: block;
position: absolute;
top: 50%;
right: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="carousel-wrap">
<ul class="carousel clearfix">
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Комнатные цветы1</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Свадебные цветы2</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Комнатные цветы3</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Свадебные цветы4</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Комнатные цветы5</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Свадебные цветы6</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Комнатные цветы7</a>
</div>
</li>
<li class="carousel__title">
<div class="myslide">
<img class="carousel__image" src="http://www.sadalisa.ru/wp-content/uploads/2010/10/05157cad.jpg" alt="">
<a href="#" class="carousel__link">Свадебные цветы8</a>
</div>
</li>
</ul>
<div class="controls">
<div class="controls__prev"><a href="#">prev</a></div>
<div class="controls__next"><a href="#">next</a></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function() {
var e = $(".carousel"),
c = $("li", e).get(),
d = c.length,
g = $("div.carousel-wrap"),
h = $(".controls__next, .controls__prev");
h.on("click", function(a) {
a.preventDefault();
a = e.position().left;
if (this.classList.contains("controls__next"))
for (var b = 0; b < d; b++) {
var f = $(c[b]).position().left;
if (f > -a) {
a = f;
break
}
} else
for (b = d - 1; - 1 < b; b--)
if (f = $(c[b]).position().left, f < -a) {
a = f;
break
}
h.css({
opacity: 1
});
b > 0 || $(this).css({
opacity: .2
});
b = $(c[d - 1]).position().left + $(c[d - 1]).width() - g.width();
a > b && (a = b, $(this).css({
opacity: .2
}));
e.stop().animate({
left: -a + "px"
}, 1E3)
});
var k;
$(window).on("resize", function() {
window.clearTimeout(k);
k = window.setTimeout(function() {
var a = -e.position().left + g.width() - $(c[d - 1]).position().left - $(c[d - 1]).width();
0 < a && e.stop().animate({
left: "+=" + a + "px"
}, 300)
}, 200)
})
});
</script>
</body>
</html>