Показать сообщение отдельно
  #1 (permalink)  
Старый 28.01.2013, 07:11
Интересующийся
Отправить личное сообщение для kulgar Посмотреть профиль Найти все сообщения от kulgar
 
Регистрация: 09.01.2013
Сообщений: 19

Остановка слайдера если кончаются объекты
Имею написанный вручную слайдер (предложение пользоваться готовыми не актуально). Принцип работы слайдера - из базы берутся объекты(картинки) из них по ширине экрана выставляется количества объектов, Есть 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>
Ответить с цитированием