Пока не знаю, просто выложил в топик
<!DOCTYPE>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/></script>
</head>
<body>
<style>
/* Скроллинг объектов */
#slider-objects {position: absolute; bottom: 0; left: 0; right: 0; z-index: 10000; background: #efefef; height: 140px;}
#slider-objects .slider-overflow {position: relative; overflow: hidden; margin: 0 61px; height: 140px;}
#slider-objects ul {position: absolute; margin: 1px 0; padding: 0; top:0; left: 0;}
#slider-objects ul li {position: relative; margin: 0 1px 0 0; width: 184px; height: 138px; overflow: hidden; float: left;}
#slider-objects ul li img {width: 184px; height: 138px;}
#slider-objects .slider-but-parent, #slider-objects .slider-but-next {position: absolute; display: block; width: 60px; height: 138px; top: 1px; background: #fff url('/static/images/images_sprite.png');}
#slider-objects .slider-but-parent {left: 0; background-position: 0px 0px; display: none;}
#slider-objects .slider-but-next {right: 0; background-position: 60px 0px;}
.EndElem {float:right;}
</style>
<script type="text/javascript">
$(document).ready(function () {
var sliderObjects = $('#slider-objects');
var butParent = $('.slider-but-parent', sliderObjects);
var butNext = $('.slider-but-next', sliderObjects);
var listObjects = $('ul', sliderObjects);
var objectWidth = 184;
var _width, _placed;
var corectPosition = 0;
var countObject = 0;
var positionPage = 0;
var obj =$(".slider-overflow").find("a > img");
//alert(LngObj);
var LngObj = obj.length; //Длина массива картинок
obj.eq(LngObj-1).addClass('EndElem'); //Установили класс на последний
$(window).resize(function() {
_width = $(window).width();
_placed = Math.floor((_width - 122) / objectWidth);
});
$(window).resize();
countObject = listObjects.children().length;
listObjects.width((objectWidth * countObject) + 122);
butParent.live('click', function() {
var positionX = ((objectWidth + 1) * _placed);
listObjects.stop().animate({
left: corectPosition + positionX,
}, 500,function(){
corectPosition += positionX;
console.log(corectPosition);
});
});
butNext.live('click', function() {
var positionX = -((objectWidth + 1) * _placed);
butParent.show();
var pageObject = Math.floor(countObject / _placed);
alert(positionPage+'\n' +(parseInt(+(listObjects.children(':first').width())*countObject)+ (+positionX)*(+positionPage)));
alert(positionPage, pageObject);
alert(countObject - (pageObject * _placed));
if (positionPage <= pageObject - 1) {
listObjects.stop().animate({
left: corectPosition + positionX,
}, 500,'swing',function(){
corectPosition += positionX;
console.log(corectPosition);
positionPage ++;
});
};
});
});
</script>
<section id="slider-objects" class="shadow-10 open">
<a class="slider-but-parent" href="javascript: void(0);"/>Prev</a>
<div class="slider-overflow">
<ul style="width: 5090px;">
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/2">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/3">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/4">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/5">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/6">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png"/>
</a>
</li>
<li>
<a href="/object/1">
<img src="/uploads/objects/1/preview.png" class="EndElem"/>
</a>
</li>
</ul>
</div>
<a class="slider-but-next" href="javascript: void(0);"/>Next</a>
</section>
</body>
</html>