Отображение скрытого блока из карусели

[Kasper28]

Всем доброго времени суток.
Пробую реализовать отображение скрытых блоков при нажатии на элемент карусели. Карусель зацикленная и проблема в том, что на повторной прокрутке карусели, или когда листаешь назад, скрытые блоки не отображаются.
Причина, как я понимаю, в том, что в зацикленной карусели уже прокрученные элементы удаляются, а в начало уже встают как бы новые. Возможно, поэтому мой скрипт отображения/скрытия их не видит. Не могу решить проблему.
Если ваш стиль помощи - наводки и подсказки, пусть они будут максимально прозрачными:) Буду благодарен за помощь.

Скрытый блок

<div id='container'>
<div id="d1" class="up">
<div id="close" class="scroll-up">Сверунть</div>
</div>

<div id="d2" class="up">
<div id="close" class="scroll-up">Свернуть</div>
</div>

<div id="dn" class="up">
<div id="close" class="scroll-up"></div>
</div>


Карусель

<ul id='spisok'>
<li data-id='1'>
<div class="b-carousel-block" >
<img src="" alt="image-carusel" />
</div>
</li>
<li data-id='2'>
<div class="b-carousel-block" >
<img src="" alt="image-carusel" />
</div>
...
<li data-id='n'>
<div class="b-carousel-block">
<img src="" alt="image-carusel" />
</div>
</li>
</ul>


JS карусели

$(document).ready(function(){
$(".b-carousel-button-right").click(function(){
$(".h-carousel-items").animate({left: "-242px"}, 200);
setTimeout(function () {
$(".h-carousel-items .b-carousel-block").eq(0).clone().appendTo(".h-carousel-items");
$(".h-carousel-items .b-carousel-block").eq(0).remove();
$(".h-carousel-items").css({"left":"0px"});
}, 300);
});
$(".b-carousel-button-left").click(function(){
$(".h-carousel-items .b-carousel-block").eq(-1).clone().prependTo(".h-carousel-items");
$(".h-carousel-items").css({"left":"-242px"});
$(".h-carousel-items").animate({left: "0px"}, 200);
$(".h-carousel-items .b-carousel-block").eq(-1).remove();
});
});


JS скрытого блока

$(document).ready(function (){
$('#spisok > li').click(function (){
$('#container > div').hide();
var i=$(this).data('id');
$('#d'+i).slideDown();
});
$(".scroll-up").click(function () {
$('#container > div').slideUp();
})
});

[danik.js]

А где вживую увидеть можно?

[Kasper28]

http://dmitriy.pro/

[рони]

Kasper28,
нутро div из li вынули -- выглядит всё одинаково -- но сейчас над картинкой нет никакого li и нет никакого var i=$(this).data('id');

список li пуст кликать неначего $('#spisok > li') ==
<ul id="spisok">
<li data-id="1">

</li>

<li data-id="2">

</li>

<li data-id="3">

</li>

<li data-id="4">

</li>

<li data-id="5">

</li>

<li data-id="6">

</li>

<li data-id="7">

</li>

</ul>

ну и так на всякий
<div class="scroll-up" id="close">Сверунть<img src="http://dmitriy.pro/wp-content/themes/dima/img/scroll2.png"></div>

[Kasper28]

div из li вынули -- выглядит всё одинаково -- но сейчас над картинкой нет никакого li и нет никакого var i=$(this).data('id');

список li пуст кликать неначего $('#spisok > li') ==
Не понимаю, объясните, пожалуйста, более развернуто

[рони]

Kasper28,
это первый скрипт
$(document).ready(function(){

$(".b-carousel-button-right").click(function(){ // при клике на правую кнопку запускаем следующую функцию:
$(".h-carousel-items").animate({left: "-242px"}, 200, function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.
var first = $("#spisok li:first");
first.clone().appendTo("#spisok"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели
first.remove(); // удаляем первый элемент карусели
$(".h-carousel-items").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели
}); // производим анимацию: блок с набором картинок уедет влево на 230 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.

});

$(".b-carousel-button-left").click(function(){ // при клике на левую кнопку выполняем следующую функцию:
var last = $("#spisok li:last");
last.clone().prependTo("#spisok"); // выбираем последний элемент набора, создаём его копию и помещаем в начало набора
$(".h-carousel-items").css({"left":"-242px"}); // устанавливаем смещение набора -222px
$(".h-carousel-items").animate({left: "0px"}, 200); // за 200 милисекунд набор элементов плавно переместится в исходную нулевую точку
last.remove(); // выбираем последний элемент карусели и удаляем его
});

});

это второй
$(document).ready(function (){
$('#spisok').on('click', 'li', function (){
var i=$(this).data('id');
$('#container > div').not($('#d'+i)).hide();
$('#d'+i).slideDown();
});
$(".scroll-up").click(function () {
$('#container > div').slideUp();
})

});

поменяйте

Не понимаю, объясните, пожалуйста, более развернуто

это удалить div $(".h-carousel-items .b-carousel-block").eq(0).remove(); из li -- li пуст

если удалили но ничего невернули по какому месту кликнуть чтоб это $('#spisok > li').click произошло?

[Kasper28]

Помогло. Спасибо вам большое! Сейчас буду вникать в исправление