Имею написанный вручную слайдер (предложение пользоваться готовыми не актуально). Принцип работы слайдера - из базы берутся объекты(картинки) из них по ширине экрана выставляется количества объектов, Есть 2 стрелки влево и вправо, при нажатии которых линейка объектов сдвигается влево или в право, никак не могу сообразить как сделать остановку на последнем объекте.
Если по простому в базе беру 27 картинок. по ширине у меня помещаются 8 картинок, При нажатии на стрелку вправо, сладер проматывается на 8 картинок, но в конце у меня остается 3 картинки и все остальное пространство белое, как сделать что бы самая последняя картинка была с право и не было пустого пространства
<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;
$(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);
console.log(positionPage, pageObject);
console.log(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);"></a>
<div class="slider-overflow">
<ul style="width: 5000px">
<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"></a></li>
</ul>
</div>
<a class="slider-but-next" href="javascript: void(0);"></a>
</section>