Мне кажется что у меня решение немного проще.
Делаю длинный div с слайдами (slider-intro) . Он обернут другим дивом с overflow:hidden (slider). И еще пару кнопочек есть , но это пустяк. И кликая по кнопке лево\право слайды меняются местами.
Осталась вот какая проблема. Если скажем клацать "тихо-мирно", то все работает ок, но если начать клацать как бешеный , то не милисекунды видно , то что не нужно видеть. То есть нужна проверка , перемещаются сечас слайды или нет, а потом запускать анимацию, короче говоря анимация не должна запускаться по идет смена слайдов и хотелось бы без присваивания иддентификатора , то есть без переменных . а более правильно.
Живой пример тут>>
http://duvanov.net/slider.html
Привожу ниже код слайдера.
#slider
{
width:600px;
height:300px;
overflow:hidden;
margin:0;
padding:0;
margin-top:100px;
left:100px;
}
#slider-intro
{
width:1800px; /* БЕРЕТСЯ КАК СУММА ВСЕ ПОЛЕЙ*/
height:300px;
background:#DDD;
float:left;
padding:0;
left:-600px;
}
div {
position:relative;
float:left;
width:600px;
height:300px;
background:#06F;
}
<body>
<div id="slider">
<div id="slider-intro">
<div id="one" style="background:url(images/nemo.jpg )" title="1"><h1> ONE </h1></div>
<div id="two" style="background:url(images/walle.jpg )"title="2"><h1> two </h1></div>
<div id="three" style="background:url(images/nemo.jpg )"title="3"><h1>THREE </h1></div>
</div>
</div>
<button id="left">«</button> <button id="right">»</button>
</body>
$(document).ready(function() {
$("#right").click(function(){
$("#slider-intro").animate({"left": "+=600px"}, "slow", function() {
permutation('lefor');
});
});
$("#left").click(function(){
$("#slider-intro").animate({"left": "-=600px"}, "slow", function() {
permutation('left');
});
});
function permutation(trend)
{
// Получаем перечень вложенных дивов
var div = document.getElementById('slider-intro');
var elems = div.getElementsByTagName('div');
// Изменяется расположенеи дивов внутри главного дива.
var first = elems[0].id;
var name = '#'+first;
var middle = elems[1].id;
var name1 = '#'+middle;
var last = elems[2].id;
var name2 = '#'+last;
$("#slider-intro").css('left','-600px');
if(trend=="left")
{
$(name2).after($(name));
}else
{
$(name).after($(name2)); // А вот как это не делать 2 раза?
$(name2).after($(name));
}
}
});