Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Остановка слайдера если кончаются объекты (https://javascript.ru/forum/jquery/35012-ostanovka-slajjdera-esli-konchayutsya-obekty.html)

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

Deff 28.01.2013 07:29
допишите run в BB-тег HTML и добавьте библиотеку jQuery в начало кода
Тогда можно глянуть на действующую модель(или ссылку на тест страницу


[HTML run]
...
[/html]

kulgar 28.01.2013 07:46 
<!DOCTYPE html>
<!-- saved from url=(0023)http://pokazdoma.local/ -->
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" style=""><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">@media print {  .gmnoprint {    display:none  }}@media screen {  .gmnoscreen {    display:none  }}</style>
		<meta content="charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="language" content="ru">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description">
<meta name="keywords">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="icon" type="image/x-icon" href="http://pokazdoma.local/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="http://pokazdoma.local/favicon.ico">
<link sizes="16x16" rel="icon" href="http://pokazdoma.local/favicon.png">
<link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/normalize.min.css" media="all">
<link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/960.css" media="all">
<link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style.17012013.css" media="all">
<link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style.css" media="0">
<link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style(1).css" media="0">
<link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style(2).css" media="0">
<link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style(3).css" media="0">
<script type="text/javascript" src="./pokazdoma.local_files/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./pokazdoma.local_files/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="./pokazdoma.local_files/script.js"></script>
<script type="text/javascript" src="./pokazdoma.local_files/plugins.17012013.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
var baseUrl = "";
/*]]>*/
</script>
<title></title>
	<script type="text/javascript" charset="UTF-8" src="./pokazdoma.local_files/{common,util,marker,map}.js"></script><script type="text/javascript" src="chrome-extension://nhgcieglcpdegkhamigiokdphfhhnlhh/js/injected.js" charset="utf-8"></script><script type="text/javascript" charset="UTF-8" src="./pokazdoma.local_files/{onion}.js"></script><script type="text/javascript" charset="UTF-8" src="./pokazdoma.local_files/{controls,infowindow,overlay,stats}.js"></script><script type="text/javascript" charset="UTF-8" src="./pokazdoma.local_files/ft"></script></head>
	<body>

		<section id="navigation" class="shadow-10">
			<div class="container_12">
				<div class="grid_12">
					<div class="left-block">
						<div id="logo">
							<a href="./pokazdoma.local_files/pokazdoma.local.htm"><img src="./pokazdoma.local_files/logo.png" alt=""></a>
						</div>
						<div id="city">
							<script type="text/javascript">
								$(document).ready(function () {
									var citySelect = $('#city');
									var cityClick = $('.dropdown-toggle', citySelect);
									var cityLists = $('.dropdown-menu');
									var cityDropdown = $('.dropdown > li');

									var showMenu = function () {
										cityClick.addClass('open');
										cityLists.show();
									}

									var hideMenu = function () {
										cityClick.removeClass('open');
										cityLists.hide();
									}

									cityDropdown.live('mouseenter', function() {
										showMenu();
									}).live('mouseleave', function() {
										hideMenu();
									});

									$('li > a', cityLists).live('click', function() {
										hideMenu();
									});
								});
							</script>
							<ul class="dropdown">
								<li class=""><a class="dropdown-toggle radius-5" href="javascript: void(0);">Алматы<pre class="caret"></pre></a>
									<ul class="dropdown-menu shadow-8-5 radius-5" style="display: none;">
										<li class="item"><a href="javascript: void(0);">Алматы</a></li>
										<li class="item"><a href="javascript: void(0);">Астана</a></li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
					<div id="main-but">
						<a class="btn btn-red" href="javascript: void(0);">Разместиться</a>
					</div>
					<nav id="menu-main">
						<ul>
																															<li class="item active"><span>Карта</span><pre></pre></li>
																																<li class="item"><a href="http://pokazdoma.local/object">Недвижимость</a></li>
																																<li class="item"><a href="http://pokazdoma.local/agency">Агентства</a></li>
																					</ul>
					</nav>
				</div>
			</div>
		</section>		<section id="map" style="height: 896px; left: 340px; margin-right: 680px;">
	<script type="text/javascript" src="./pokazdoma.local_files/js"></script><script src="./pokazdoma.local_files/main.js" type="text/javascript"></script>
	<script type="text/javascript" src="./pokazdoma.local_files/markerwithlabel.js"></script>
	<script type="text/javascript" src="./pokazdoma.local_files/markerclusterer.js"></script>
	
</section><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);" style="display: inline;"></a>
	<div class="slider-overflow">
		<ul style="width: 5090px; left: -4440px;">
			<li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li>
			<li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li>
			<li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li>
			<li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li>
			<li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li>
		</ul>
	</div>
	<a class="slider-but-next" href="javascript: void(0);"></a>
</section>		<section id="dock" class="shadow-10 open" style="height: 866px;">
	<div class="dock-content">
		<ul id="dock-menu" class="">
			<li class="item active">
				<div class="icons">
					<span class="icon icon-cabinet"></span>
					<span class="icon-selected icon-cabinet-active"></span>
				</div>
			</li>
			<li class="item">
				<div class="icons">
					<span class="icon icon-bookmark"></span>
					<span class="icon-selected icon-bookmark-active"></span>
				</div>
			</li>
		</ul>
		<div id="panel-cabinet">
			Личный кабинет
		</div>
	</div>
</section>		<section id="dock-filter" class="shadow-10 open" style="height: 866px;">
	<div>Найти</div>
</section>	
</body></html>

kulgar 28.01.2013 07:46
css
/* Скроллинг объектов */
#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;}

Deff 28.01.2013 07:52
Цитата:
как сделать что бы самая последняя картинка была с право и не было пустого пространства
Как вариант - проставить последней картинке некий класс, которому css - присвоить float:right;

Deff 28.01.2013 07:55
Цитата:
Сообщение от Deff
и не было пустого пространства
Пойду спать - сделайте скриншот - расположите в последнем окне картинки, как желаемо.
Залить и выложить ссылкой(желательно не картинкой - раcтянет топик), можно сюда => http://uploads.ru/
alert("Пока!")

kulgar 28.01.2013 07:57
Дело в том что объекты будут постоянно добавлятся и убираться в базе заказчиком.поэтому я думал сделать что бы скрипт просчитывал, но встал в тупике с формулой. в java я новичок

kulgar 28.01.2013 08:12
что есть:
http://uploads.ru/9RrDx.png

что нужно:
http://uploads.ru/YNXUf.png

Спокойный ночи Deff

Deff 28.01.2013 09:11
Цитата:
Сообщение от kulgar
что нужно:
http://uploads.ru/YNXUf.png
Заклонировать недостаток объектов до полной ширины http://jquery-docs.ru/Manipulation/clone/

Установка класса последнему элементу - очень проста, 
var obj = $(".slider-overflow > ul > li > a > img");
var LngObj = obj.length; //Длина массива картинок
obj.eq(LngObj-1).addClass('EndElem'); //Установили класс на последний

Хотя при клонировани до полноразмера - вродь ухищрений не нужно

kulgar 28.01.2013 09:44
Цитата:
Сообщение от Deff (Сообщение 229857)
Заклонировать недостаток объектов до полной ширины http://jquery-docs.ru/Manipulation/clone/

Установка класса последнему элементу - очень проста, 
var obj = $(".slider-overflow > ul > li > a > img");
var LngObj = obj.length; //Длина массива картинок
obj.eq(LngObj-1).addClass('EndElem'); //Установили класс на последний

Хотя при клонировани до полноразмера - вродь ухищрений не нужно
Не смогли уснуть DEFF?

Попробовал класс прописывается но не срабатывает =(

вот результат http://uploads.ru/7krlM.png

Идея хороша. С клонированием оставлю как запасной вариант, есть мысли почему не срабатывает float?

Deff 28.01.2013 09:54
Цитата:
Сообщение от kulgar
Попробовал класс прописывается но не срабатывает =(
Возможно он не установился
Выведите длину массива
var obj = $(".slider-overflow > ul > li > a > img");
var LngObj = obj.length; //Длина массива картинок
alert(LngObj);
obj.eq(LngObj-1).addClass('EndElem'); //Установили класс на последний

Если 0 или undefined - cелектор $(".slider-overflow > ul > li > a > img") нужно заменить на
$(".slider-overflow").find("a > img");

kulgar 28.01.2013 10:25
Цитата:
Сообщение от Deff (Сообщение 229863)
Возможно он не установился
Выведите длину массива
var obj = $(".slider-overflow > ul > li > a > img");
var LngObj = obj.length; //Длина массива картинок
alert(LngObj);
obj.eq(LngObj-1).addClass('EndElem'); //Установили класс на последний

Если 0 или undefined - cелектор $(".slider-overflow > ul > li > a > img") нужно заменить на
$(".slider-overflow").find("a > img");
До и после замены пишет undefined. результат не поменялся

Deff 28.01.2013 16:29
kulgar,
Попробуйте перезалить текущее в песочницу(ссылка в меню сайта) - потещу

kulgar 30.01.2013 07:17
http://learn.javascript.ru/play/zgyKFb

kulgar 30.01.2013 14:43
Цитата:
Сообщение от Deff (Сообщение 229920)
kulgar,
Попробуйте перезалить текущее в песочницу(ссылка в меню сайта) - потещу
Все правильно залил?

Deff 30.01.2013 14:50
kulgar,
Спасибо - занят был - только почему не работает ?
(К ночи гляну

kulgar 30.01.2013 15:02
Была еще идея через .eq() прописать stop что бы анимация заканчивалась но чтот видать или я не нашел как это делать то ли это не возможно

Deff 30.01.2013 15:10
kulgar,
:) Я бы пустил по кругу

Deff 30.01.2013 15:13
Тут как то был вариант http://javascript.ru/forum/jquery/34...tml#post228044

kulgar 30.01.2013 15:18
Я бы тоже воспользовался каруселью но нужно что бы останавливался (

Deff 30.01.2013 15:52
kulgar,
1 Определить общую длину не скрытого контейнера со слайдами
2. Тестить смещение по сравнению с длиной, если >= .выключаем

Deff 30.01.2013 16:30
Пока не знаю, просто выложил в топик
<!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>

kulgar 30.01.2013 20:05
Ну если понял правильно то общая длина не скрытого контейнера
будет вычислить (Длина объекта*Количество штук на странице)*на количество страницы
(objectWidth* _placed)*(countObject - (pageObject * _placed))

kulgar 31.01.2013 11:48
У меня получилось сделать
http://learn.javascript.ru/play/5HxU9b
но всетл теперь вопрос что бы стрелочки вперед и назад пропадали при достижения лимита тоесть дошел до конца вправо она исчезла если влево то левая исчесзла

Deff 31.01.2013 12:45
kulgar,
Ну ежели условие выполнилось( а проверяешь в каждом событии клика,
Текущую кнопку hide(); а противоположную show()

kulgar 31.01.2013 12:55
Никак чтот не соображу вы можите на примере показать на одной стороне?

Deff 31.01.2013 13:07
kulgar,
:) А как ты остановил слайдер - нарисуй строку-условия

kulgar 31.01.2013 13:25
if (corectObjects >=2) { // если номер страницы больше или равно 2 то выполняем условие (перематываем используя формулу общее кол-во объектов на странице умноженное на ширину объекта (+ 1px растояния между)
listObjects.stop().animate({
left: corectPosition + positionX,
}, 500,null,function(){
corectPosition += positionX;
positionPage ++;
});
} else { // если страница больше то по формуле Оставшиеся объекты - (общее количество - (количество на странице * (количество страниц - 1) . Оставшиеся объекты * ширину + 1px
console.log(listObjects.css('left'))
listObjects.stop().animate({
left: corectPosition - ((countObject - (_page * _placed)) * (objectWidth+1)),
}, 500,null,function(){
// corectPosition += positionlLast;
// positionPage ++;
//console.log(positionPage);
});

};

С самого начала pageObject = 4. При нажатии справа я вычитаю 1 а слева буду прибалять 1

kulgar 31.01.2013 13:26
это надо было?) я просто говорю в java не силен вот методом пробы и ошибок и старой доброй математики. Ставил значения и смотрел результаты в консоли

Deff 31.01.2013 13:56
kulgar,
я не знаю , нужно искать место, где он последнюю перемотку делает... и там делать смену видимости кнопок....
мне проще новый слайдер написать, :(

kulgar 31.01.2013 14:01
Ясненько но все равно большое спасибо за помощь буду дальше разбирать )


Часовой пояс GMT +3, время: 10:51.