Chmil,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery(function() {
jQuery(".slider").each(function(indx, el) {
var slideWrap = jQuery(".slide-wrap", el);
var nextLink = jQuery(".next-slide", el);
var prevLink = jQuery(".prev-slide", el);
var slideWidth = jQuery(".slide-item", el).outerWidth();
var newLeftPos = slideWrap.position().left - slideWidth;
nextLink.click(function() {
if (!slideWrap.is(":animated")) {
slideWrap.animate({
left: newLeftPos
}, 500, function() {
slideWrap.find(".slide-item:first").appendTo(slideWrap).parent().css({
"left": 0
});
});
}
});
prevLink.click(function() {
if (!slideWrap.is(":animated")) {
slideWrap.css({
"left": newLeftPos
}).find(".slide-item:last").prependTo(slideWrap).parent().animate({
left: 0
}, 500);
}
});
});
});
</script>
</head>
<body>
<div class="slider">
<div class="slide-list">
<div class="slide-wrap">
<div class="slide-item">
Элемент слайдера 1
</div>
<div class="slide-item">
Элемент слайдера 2
</div>
<div class="slide-item">
Элемент слайдера 3
</div>
<div class="slide-item">
Элемент слайдера 4
</div>
</div>
<div class="clear"></div>
</div>
<div class="namecat">ИМЯ КАТЕГОРИИ</div>
<div class="prjamu"></div>
<div class="navyp prev-slide">prev</div>
<div class="navy next-slide">next</div>
</div>
<div class="slider">
<div class="slide-list">
<div class="slide-wrap">
<div class="slide-item">
Элемент слайдера 1
</div>
<div class="slide-item">
Элемент слайдера 2
</div>
<div class="slide-item">
Элемент слайдера 3
</div>
<div class="slide-item">
Элемент слайдера 4
</div>
</div>
<div class="clear"></div>
</div>
<div class="namecat">ИМЯ КАТЕГОРИИ</div>
<div class="prjamu"></div>
<div class="navyp prev-slide">prev</div>
<div class="navy next-slide">next</div>
</div>
</body>
</html>